Html 如何使 div 低于另一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15965200/
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
How to make div below another div
提问by opraz17
I want the #bluediv below the #greendiv
我想要#bluediv下面的#greendiv
The #bluediv has margin-top : -10px; attribute
该#bluediv有margin-top : -10px; attribute
<style>
#red{
width: 400px;
border: 1px solid red;
}
#green{
width: 100%;
height: 100px;
background-color: green;
border-bottom: 2px solid yellow;
z-index: 2;
}
#blue{
width: 100%;
height: 100px;
background-color: blue;
border-top: 2px solid brown;
margin-top: -10px;
z-index: 1;
}
</style>
<div id="red">
<div id="green">
</div>
<div id="blue">
</div>
</div>
回答by Martin Turjak
Probably adding position:absoluteon the #blueand #greendiv and position:relativeon the #reddiv would do what you want, as I suspect you need one to be behind another. If they need to be one after another then use relative positioning on blue and green too.
可能增加position:absolute对#blue和#green股利和position:relative对#redDIV会做你想要什么，因为我怀疑你需要一个落后另一个。如果它们需要一个接一个，那么也可以使用蓝色和绿色的相对定位。
回答by Fabiotocchi
I cant see the problem, your code is fine. Or did you mean under div? Like the blue div hidden under the green div? Well then you need to add the position: relative ( or absoulte ) attribute on the div you want to move/hide. nad then top or left. Example:
我看不到问题，你的代码很好。或者你的意思是在div下？像隐藏在绿色 div 下的蓝色 div？那么您需要在要移动/隐藏的 div 上添加 position: relative （或 absoulte ）属性。nad 然后顶部或左侧。例子：
#blue{
/* without position: relative/absoulte the z-index wont work!*/
position:relative;
/* this moves the dives up or down*/
top: -100px;
/* this move the div left or right! */
left: 15px;
width: 100%;
height: 100px;
background-color: blue;
border-top: 2px solid brown;
margin-top: -10px;
z-index: 1;
}
