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

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

现在，如果您想将它们放在页面中间，请<div class="container">使用 css: margin: 0 auto; .

示例链接：jsFiddle

Answer 2

在#phone 和#dots 元素上使用这些css 属性：位置、z-index、顶部和左侧。

使用 position: absolute 上层，top 和 left 将上层放置到正确的位置。使用 z-index 指定层，较低的值是 backer，较大的值是upper。