How to overlay images without using postion:absolute? - css

Question

I'm looking for the proper CSS method to overlay div of images on top of another div of images (not background image) without using position:absolute. Anyone know how to do this?

Answer 1

http://jsfiddle.net/HUUQ6/2/
You can overlay/overlap elements on top of one another using a negative margin.
Example:
#b{
margin-left:-10px;
}
This will move the element b to the left 10px, overlaying whatever is to the left of it (assuming this is a display:block type element, not an inline, like a span).

Answer 2

position: absolute isn't "improper" - it's part of the CSS spec! There isn't another way to put elements over other elements, unless you faff about with position: relative or maybe some float properties.
position: absolute is the easiest way to do it. What makes you think it's a bad idea?
The only other solution is to use an image inside a div with a background, like this:
<div>
<img src="...">
</div>
Then give the div a background-image:
div
{
background: url(/images/foo.png) no-repeat;
}
However, for multiple images I'd definitely stick to position: absolute.
There's a very glitchy demo here demonstrating the effect.

Answer 3

Here's how to layer 2 images and center the second image.
NOTE: "Position: absolute" in "image2" is only used so the images can overlap. It will still center your image responsively / without needing to use "left: " or "right: " or margin, and is independent of the image size.
HTML:
<div class="page-container">
<div class="images-container">
<img class="image1" src="YOURIMAGEURLHERE" />
<div class="image2container">
<img class="image2" src="SECONDIMAGEURLGOESHERE" />
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.images-container {
position: relative;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
}
.image1 {
position: relative;
top: 0;
left: 0;
//if you want to blur the outer image
//transform: scale(1.1);
//filter: blur(20px);
//-webkit-filter: blur(20px);
height: 100vh;
width: 100vw;
}
.image2container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image2 {
position: absolute;
top: 0px;
}
.page-container{
}
SCSS (if you prefer it, which I do - makes it much easier to copy styles from 1 file to another)
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.page-container {
.images-container{
position: relative;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
.image1 {
position: relative;
top: 0;
left: 0;
//if you want to blur the outer image
//transform: scale(1.1);
//filter: blur(20px);
//-webkit-filter: blur(20px);
height: 100vh;
width: 100vw;
}
.image2container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.image2 {
position: absolute;
top: 0px;
}
}
}
}