I need to display 4 images centered in the screen. I need this images must be stacked one of top another. I resolved the stack part:
.img-container { position: relative; }
.img-container .top {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div class="img-container">
<img src="icon-1.png">
<img class="top" src="icon-2.png">
<img class="top" src="icon-3.png">
<img class="top" src="icon-4.png">
</div>
<div >
<img class="img-responsive center-block " src="another-image-below.png"
style="display: block; margin: 0 auto;">
</div>
That gives me the 4 images stacked BUT now I need to center all 4 of them (horizontally). The "another-image-below.png" is just another image that it is also centered but that must be placed below the 4 stacked images.
It sound simple, and I tried everything but I cannot resolve it.
How can I achieve that?
Thanks in advance.
EDIT:
https://jsfiddle.net/b5p8dkcu/4/
You don't need the z-index in your example, unless you have another element somewhere that has to be behind the images.
You can just add align="center" to the <div align="center" class="img-container">.
EDIT:
<html>
<style>
.img-container {
position: relative;
top: 0;
left: 0;
}
.top {
}
<div align="center" class="img-container">
<img src="icon-1.png">
<img class="top" src="icon-2.png">
<img class="top" src="icon-3.png">
<img class="top" src="icon-4.png">
</div>
<div >
<img class="img-responsive center-block " src="6.png"
style="display: block; margin: 0 auto;">
</div>
If you need them to be vertically on top of each other:
<style>
.img-container {
position: relative;
top: 0;
left: 0;
}
.top {
display: block;
}
If you need them to be literally on top of each other:
<style>
.img-container {
position: relative;
top: 0;
left: 0;
}
.top {
position: absolute;
}
Related
I have three images. I want to combine them
I am referring to this link
https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20absolute,moves%20along%20with%20page%20scrolling.
I am trying to achieve this three combine images
I tried static and relative position but they did not work
.object-left, .main-image {
position: absolute;
}
.object-right , .main-image{
position: absolute; //here I am using comma but not work
}
.cshtml
.object-left,
.main-image .object-right {
position: absolute;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="~/Graphics/Services Page/obj1.svg" style="width:50px;height:50px;" /> //1 image
<img class="main-image" src="~/Graphics/Services Page/Mobile app developement.svg" /> //2 image
<img class="object-right" src="~/Graphics/Services Page/obj2.svg" style="width:50px;height:50px;" /> //3 image
</div>
<div class="col-md-6" style="margin-top:100px;">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
The problem is that when you use absolute positioning, the objects start at the upper-left corner of the parent (i.e. location 0x0), so all your three images appear on top of each other. All you need to do is tell them where they should be by adding the left property. The first image can stay at left=0, so you don't need to do anything. The second image must start at the width of the first image, left=50px in my example below. The third image must start at the total width of the fist and second image, left=100px in my example below.
Also remember that since you used absolute positioning on all three images and the parent doesn't have any other content, it will collapse. So you need to give it the height of the tallest image.
.object-left {
position: absolute;
}
.main-image {
position: absolute;
left: 50px;
}
.object-right {
position: absolute;
left: 100px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
Note: in the example above, all images are placed at the top of the parent by default. If you want some images to start at a different location, then give it a top property. In the example below, I gave the third image a top=50px property to align it with the bottom of the second image:
.object-left {
position: absolute;
top: 0;
}
.main-image {
position: absolute;
left: 50px;
top: 0;
}
.object-right {
position: absolute;
left: 100px;
top: 50px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
I think this is what you want to do. I would remove the inline style on the object- images and put that in the css. I left the top, left, right on .object- empty so that you can put where you want to place them.
Does this make sense?
.image {
position: relative;
}
.object-left {
position: absolute;
top: ;
left: ;
}
.main-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.object-right {
position: absolute;
top: ;
right: ;
}
<div class="image">
<div class="object-left"></div>
<div class="main-image"></div>
<div class="object-right"></div>
</div>
Below is my code, my goal is to prevent the div with an id "description" to overlap on the div with class name "container_display". How can I achieve this? I want the second div to show at the bottom of the image.
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
}
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<div id="description">TEXT HERE</div>
You need to set a height for the container, because the absolutely positioned elements are not considered to occupy width or height in the container.
Details on MDN:
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout
#container_display {
position: relative;
height: 60px;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
There is one way to "hack it", which is to place one static image there and make it visibility: hidden, which is to occupy space, but not visible, and the position back to static:
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
#container_display .spacer {
visibility: hidden;
position: static;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
<img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
You don't need this:
#container_display img {
position: absolute;
top: 0;
left: 0;
}
You could also add a break between both divs to create space between them, like this:
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<br>
<div id="description">TEXT HERE</div>
I want 3 images on top of each other (so i can switch between them with the slider). I use the relative/absolute technique.
Strangely, the result is floating outside the div (see the picture below).
When I try to fix it with clearfix, it just cancel the superposition.
Any help ?
Here is a part of my css :
body {
img {
width: 900px;
}
#parentsuperpose {
position: relative;
}
img.superpose {
position: absolute;
top: 25px;
left: 25px;
}
#img1 {
z-index: 10;
}
#img2 {
z-index: 11;
}
#img3 {
z-index: 12;
}
Here is part of my HTML
<div class="row">
<div class="col-md-12" id="parentsuperpose">
<img src="images/mur01.jpg" class="superpose" id="img1" alt="mur01" style="visibility:visible;">
<img src="images/mur02.jpg" class="superpose" id="img2" alt="mur02" style="visibility:hidden;">
<img src="images/mur03.jpg" class="superpose" id="img3" alt="mur03" style="visibility:hidden;">
</div>
</div>
Here is the result :
enter image description here
I'm trying to put image number 3 at the bottom of the page, but it doesn't work. I used position fix and sticky too but it doesn't work too.
.boxes {
position: absolute;
}
.downa {
position: relative;
margin-bottom: 0;
bottom: 0;
left: 0px;
}
.topa {
position: relative;
top: 0px;
left: 0px;
}
<div class="boxes">
<center>
<img class="topa" height="50" src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-md.png" width="50" />
</center>
<center>
<img class="downa" height="50" src="http://www.clker.com/cliparts/g/b/d/Y/s/2/blue-number-3-md.png" width="50" />
</center>
</div>
How can I put image number 3 at the bottom of the page?
Add a class to the parent of the "3" image (like ".foo") than impose the "fixed" propriety:
.boxes{
position:absolute;
}
.downa{
position:relative;
margin-bottom: 0;
bottom: 0;
left: 0px;
}
.topa{
position:relative;
top:0px;
left: 0px;
}
.foo {
position:fixed;
bottom:0
}
<div class="boxes">
<center>
<img class="topa" height="50" src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-md.png" width="50" />
</center>
<center class="foo">
<img class="downa" height="50" src="http://www.clker.com/cliparts/g/b/d/Y/s/2/blue-number-3-md.png" width="50" />
</center>
</div>
http://jsfiddle.net/u6Lg9tns/
I am supposing you are looking for a sticky footer; if you want a positioning based on the actual height of parent element only; you should use Javascript (or, more likely JQuery) to check the actual size of the element (if dynamic) and set the proper value for positioning...
Try this .boxes{position:relative;} .downa{position:absolute; bottom:0;left:0px; } .topa{position:absolute;top:0px;left:0px;}
I want to fix an image above the slider, I've used the below code. It gets fixed but the problem is that, if I minimize or resize the browser, the image moves from that position and takes its own place.
CSS:
.imageover{
background:transparent;
bottom: 0;
color: #FFFFFF;
left: 0;
position: absolute;
width: 100%;
z-index: 8;
opacity:1.0!important
}
HTML:
<div class="topbanner" width=1000px>
<div class ="imageover">
<img src="images/greendesign.png" width =350/>
</div>
<div id="sliderFrame">
<div id="slider">
<img src="images/slider1.png"/>
<img src="images/slider2.jpg" />
<img src="images/slider3.jpg" />
<img src="images/slider4.jpg" />
<img src="images/slider5.jpg" />
<img src="images/slider6.jpg" />
</div>
</div>
</div>
Use position: fixed; if this an image that you want fixed on a place on the page, and unaffected by scrolling.
.imageover{
background: none;
bottom: 0;
color: #FFFFFF;
left: 0;
position: fixed;
width: 100%;
z-index: 8;
opacity: 1.0 !important
}
More on the position property here.