Html 如何让 div 落后于另一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19561585/
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 go behind another div?
提问by Jayden
I am trying to make the "box-left-mini" go in front of the divwhich is below.
我试图让“box-left-mini”放在div下面的前面。
<div class="box-left-mini">
this div is infront
<div style="background-image:url(/images/hotcampaigns/campaign-sample.png);height:100px;width:100px;">
this div is behind
</div>
</div>
The CSS for box-left-miniis:
CSS 为box-left-mini：
.box-left-mini {
float:left;
background-image:url(website-content/hotcampaign.png);
width:292px;
height:141px;
}
采纳答案by Richard Peck
HTML
HTML
<div class="box-left-mini">
<div class="front"><span>this is in front</span></div>
<div class="behind_container">
<div class="behind">behind</div>
</div>
</div>
CSS
CSS
.box-left-mini{
float:left;
background-image:url(website-content/hotcampaign.png);
width:292px;
height:141px;
}
.box-left-mini .front {
display: block;
z-index: 5;
position: relative;
}
.box-left-mini .front span {
background: #fff
}
.box-left-mini .behind_container {
background-color: #ff0;
position: relative;
top: -18px;
}
.box-left-mini .behind {
display: block;
z-index: 3;
}
The reason you're getting so many different answers is because you've not explained what you want to do exactly. All the answers you get with code will be programmatically correct, but it's all down to what you want to achieve
你得到这么多不同答案的原因是你没有准确解释你想要做什么。您通过代码获得的所有答案在编程上都是正确的，但这完全取决于您想要实现的目标
回答by SaturnsEye
回答by Ben Barkay
To answer the question in a general manner:
笼统地回答这个问题：
Using z-indexwill allow you to control this. see z-index at csstricks.
使用z-index将允许您控制这一点。请参阅csstricks 中的 z-index。
The element of higher z-indexwill be displayed on top of elements of lower z-index.
较高的元素z-index将显示在较低的元素之上z-index。
For instance, take the following HTML:
例如，采用以下 HTML：
<div id="first">first</div>
<div id="second">second</div>
If I have the following CSS:
如果我有以下 CSS：
#first {
position: fixed;
z-index: 2;
}
#second {
position: fixed;
z-index: 1;
}
#firstwil be on top of #second.
#first将在#second.
But specifically in your case:
但特别是在您的情况下：
The divelement is a child of the divthat you wish to put in front. This is not logically possible.
该div元素是div您希望放在前面的的子元素。这在逻辑上是不可能的。
回答by melc
One possible could be like this,
一种可能是这样的，
HTML
HTML
<div class="box-left-mini">
<div class="front">this div is infront</div>
<div class="behind">
this div is behind
</div>
</div>
CSS
CSS
.box-left-mini{
float:left;
background-image:url(website-content/hotcampaign.png);
width:292px;
height:141px;
}
.front{
background-color:lightgreen;
}
.behind{
background-color:grey;
position:absolute;
width:100%;
height:100%;
top:0;
z-index:-1;
}
But it really depends on the layout of your div elements i.e. if they are floating, or absolute positioned etc.
但这实际上取决于 div 元素的布局，即它们是浮动的还是绝对定位的等等。
回答by Arul
container can not come front to inner container. but try this below :
Css :
----------------------
.container { position:relative; }
.div1 { width:100px; height:100px; background:#9C3; position:absolute;
z-index:1000; left:50px; top:50px; }
.div2 { width:200px; height:200px; background:#900; }
HTMl :
-----------------------
<div class="container">
<div class="div1">
Div1 content here .........
</div>
<div class="div2">
Div2 contenet here .........
</div>
</div>
