Html div 仅使用 css 浮动在其他 div 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11008622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div floating on top of other divs with css only
提问by LeeUser1335457
I looked around for a solution and it seems that there are some around, but I don't seem to make it work, any idea will be greatly appreciated.
我环顾四周寻找解决方案，似乎有一些解决方案，但我似乎没有使它起作用，任何想法将不胜感激。
I've got three divs into a div container (centered) used as a background (z-index : -10;). I would like to float another div (it will be another container z-index : 5;) on top of the previous ones.
我将三个 div 放入用作背景 ( z-index : -10;)的 div 容器（居中）中。我想z-index : 5;在之前的div之上浮动另一个 div（它将是另一个容器）。
HTML below:
下面的 HTML：
<div class="div-backall ">
<div class="div-backtop">
<p>1111</p>
</div>
<div class="div-backmid">
<p>2222</p>
</div>
<div class="div-backbottom ">
<p>3333</p>
</div>
</div>
<div class="div-main">
<p>Main text goes here</p>
</div>
CSS below:
CSS如下：
.div-backall {
width: 90%;
height: 100%;
z-index : 1;
margin-left : auto;
margin-right : auto;
position : absolute;
}
.div-backtop {
width: 90%;
height: 20%;
background-color: #D8E4F8;
margin: -5px 0 0 0;
position : absolute;
margin-left : 5%;
margin-right : 5%;
}
.div-backmid {
width: 90%;
height: 75%;
background-color: #F1EFE2;
margin: 14% 0 0 0;
position : absolute;
margin-left : 5%;
margin-right : 5%;
}
.div-backbottom {
width: 90%;
height: 5%;
background-color: #D8E4F8;
margin: 70% 0 0 0;
text-align: center;
position : absolute;
margin-left : 5%;
margin-right : 5%;
}
.div-main{
width: 70%;
height: 85%;
background-color: #FFFFFF;
margin-left : 10%;
margin-right : 10%;
text-align: center;
z-index : 2;
border : thin solid Black;
position : absolute;
margin-top : 5%;
border-radius: 5px;
}
I can obtain the floating effect using margin-top : -800px;but it's a rubish solution. Also I cannot get the later centered. Is it possible this with CSS only? Shall I look to a js solution?
我可以使用获得浮动效果，margin-top : -800px;但这是一个垃圾解决方案。我也不能让后者居中。仅使用 CSS 就可以实现吗？我应该看看 js 解决方案吗？
Thanks, Lee
谢谢，李
回答by sandeep
z-indexis only work with position relative, absolute & fixed. Write like this:
z-index仅适用于 position relative, absolute & fixed。像这样写：
.div-backtop,
.div-backbottom,
.div-main{
position:relative;
}
.div-backtop{
z-index:1;
}
.div-main{
z-index:2;
}
回答by sandeep
To use z-index you have to use position absolute for every div because the relative position doesn't support z-index
要使用 z-index，您必须对每个 div 使用绝对位置，因为相对位置不支持 z-index
回答by pardhu
please make sure how the output could be? i am not able to do how to give answer for your problem...as i understand i given one solution..hope you will get from this
请确定输出如何？我无法回答您的问题......据我所知，我给出了一个解决方案......希望你能从中得到
margin-top : -700px;
position:relative;
please make changes in this
请对此进行更改
.div-main{
width: 70%;
height: 85%;
background-color: #FFFFFF;
margin-left : 10%;
z-index : 5;
border : thin solid Black;
position : relativ;
margin-top : -700px;
border-radius: 5px;
}
