How to overlay images without using postion:absolute?

I'm looking f开发者_开发技巧or 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?

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).

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.

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;
            }
        }
    }
}