Html 如何将 z-index 与相对定位一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8986071/
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 use z-index with relative positioning?
提问by Chris Vaarhorst
I have a problem with z-indexand my code. I want to have a popup on every row, positioned relative to that row. So I created this code:
z-index我的代码有问题。我想在每一行上都有一个弹出窗口，相对于该行定位。所以我创建了这个代码：
<div class="level1">
<div class="level2">
<input type="text" value="test1" />
<div class="popup">test1</div>
</div>
<div class="level2">
<input type="text" value="test2" />
<div class="popup">test2</div>
</div>
</div>
with te following style
与 te 跟随风格
.level1
{
position:relative;
z-index:2;
}
.level2
{
position:relative;
z-index:3;
}
.popup
{
position:absolute;
left:0px;
top:10px;
width:100px;
height:100px;
background:yellow;
z-index:4;
}
回答by Quentin
When you set position: relativeon an element then you establish a new containing block. All positioning inside that block is with respect to it.
当你position: relative在一个元素上设置时，你就会建立一个新的包含块。该块内的所有定位都是相对于它的。
Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.
在该块内的元素上设置 z-index 只会相对于同一块内的其他元素改变其层。
I'm not aware of any work-arounds.
我不知道任何变通办法。
回答by user1386213
try adding z-index with negative values to the back divs
尝试将负值的 z-index 添加到后面的 div
回答by jagannathbhat
You can use z-indexwith the relativeposition. You just need to specify position: relative. If you really want it to look like it is popping up, I suggest using box-shadow
您可以z-index与relative位置一起使用。您只需要指定position: relative. 如果您真的希望它看起来像弹出一样，我建议使用box-shadow
.popup {
position:relative;
left: 0px;
top: 10px;
width: 100px;
height: 100px;
background:yellow;
z-index: 4;
-webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
-moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
-ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
-o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}
回答by R01010010
Z-Index is a rule order which results will be visible ONLY when two or more elements overlap. This means that if you want to have same z-index behaviour as in absolute position you'll need to make them overlap. Position relative don't make them overlap, so for example in this example, to make this two divs to overlap, I have to set the second one's top to -50px.
Z-Index 是一种规则顺序，只有当两个或更多元素重叠时，结果才会可见。这意味着如果您想拥有与绝对位置相同的 z-index 行为，则需要使它们重叠。Position relative 不会让它们重叠，所以例如在这个例子中，为了让这两个 div 重叠，我必须将第二个的顶部设置为 -50px。
<div style="background-color: blue; width: 500px; height: 100px; position: relative">
<div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1; top: 0px"></div>
<div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>
</div>
