中心重叠图像[css]

Question

我正在尝试在css中重叠图像。它们都在中心对齐，但一个在另一个下方。我尝试了z-index'ing，这对位置很好：绝对;但如果我这样做，那么我就失去了中心。

问题：

点应该是通过电话。

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

试试这个。 位置：绝对; ，顶部：0; ，左：0; 红色div是半透明的，以显示下面的蓝色div。

现在，如果您想将这些中心放在页面中间，<div class="container">请使用css： margin：0 auto; 。

链接到示例：jsFiddle

Answer 2

在#phone和#dots元素上使用这些css属性：position，z-index，top和left。

使用position：绝对上层，以及上层和左侧将上层放置到正确的位置。使用z-index指定图层，较低的值为backer，较大的值为upper。