css - 在中心重叠图像 [css]

Question

我试图在 CSS 中重叠图像。它们都在中心对齐，但一个在另一个下方。我尝试了 z-index'ing，这对 position: absolute; 没问题。但如果我那样做，我就会失去中心。

问题:

这些点应该在电话上。

我的 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>

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

Answer 1

试试这个。 position: absolute;, top: 0;, left: 0;红色 div 是半透明的，以显示下面的蓝色 div。

现在，如果你想把它们放在页面中间，<div class="container">使用 css: ma​​rgin: 0 auto;.

示例链接:jsFiddle