CODEWITHSUNDEEP
cssimagehtml
MysteryDev
MysteryDev

Reputation: 638

Overlap Images In Center [css]

I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.

Issue: enter image description here

The dots are supposed to be over the phone.

My HTML:

<div class="content-top"><div class="cwrap">
        <motto>Become Famous On Vine.</motto>
        <img id="phone" src="./images/phone.png">
        <img id="dots" src="./images/dots.png">
    </div></div>

My CSS:

.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}

.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}

.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}

.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}

#phone {
z-index: 999;
}

#dots {
z-index: 1000;
}

.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}

Upvotes: 0

Views: 5462

Answers (2)

Nikk
Nikk

Reputation: 7921

Try this. position: absolute;, top: 0;, left: 0; The the red div is semi-transparent to reveal the blue div below.

Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.

Link to example: jsFiddle

Upvotes: 3

golddragon007
golddragon007

Reputation: 1332

Use on #phone and #dots elements these css attributes: position, z-index, top, and left.

Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.

Upvotes: 2

Related Questions