在中心重叠图像[css] [英] Overlap Images In Center [css]

问题描述

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

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.

问题：

这些点应该是通过手机的。

The dots are supposed to be over the phone.

我的HTML：

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>

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

推荐答案

试试这个。 position：absolute; ， top：0; ， left：0;
红色div是半透明的，蓝色div。

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

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

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

链接示例： jsFiddle

这篇关于在中心重叠图像[css]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！