CSS 如何让父元素出现在子元素上方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1806421/
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 get a parent element to appear above child
提问by Jourkey
I have two nested CSS elements. I need to get the parent to be on top, that is, above in z-axis, of the child element. Just setting z-index is not sufficient.
我有两个嵌套的 CSS 元素。我需要让父元素位于子元素的顶部，即 z 轴的上方。仅设置 z-index 是不够的。
I can't set a negative z-index on the child, that'll set it to below the page container on my actual page. Is this the only method?
我无法为子项设置负 z-index，这会将其设置在我实际页面上的页面容器下方。这是唯一的方法吗？
.parent {
position: relative;
width: 750px;
height: 7150px;
background: red;
border: solid 1px #000;
z-index: 1;
}
.child {
position: absolute;
background-color: blue;
z-index: 0;
color: white;
top: 0;
}
.wrapper
{
position: relative;
background: green;
z-index: 10;
}<div class="wrapper">
<div class="parent">
parent parent
<div class="child">
child child child
</div>
</div>
</div>回答by Alan Haggai Alavi
Set a negative z-indexfor the child, and remove the one set on the parent.
z-index为孩子设置一个否定，并删除父设置的一个。
.parent {
position: relative;
width: 350px;
height: 150px;
background: red;
border: solid 1px #000;
}
.parent2 {
position: relative;
width: 350px;
height: 40px;
background: red;
border: solid 1px #000;
}
.child {
position: relative;
background-color: blue;
height: 200px;
}
.wrapper {
position: relative;
background: green;
height: 350px;
}<div class="wrapper">
<div class="parent">parent 1 parent 1
<div class="child">child child child</div>
</div>
<div class="parent2">parent 2 parent 2
</div>
</div>回答by zielu1
Fortunately a solution exists. You must add a wrapper for parent and change z-index of this wrapper for example 10, and set z-index for child to -1:
幸运的是，存在解决方案。您必须为父级添加一个包装器，并将此包装器的 z-index 更改为例如 10，并将子级的 z-index 设置为 -1：
.parent {
position: relative;
width: 750px;
height: 7150px;
background: red;
border: solid 1px #000;
z-index: initial;
}
.child {
position: relative;
background-color: blue;
z-index: -1;
color: white;
}
.wrapper {
position: relative;
background: green;
z-index: 10;
}<div class="wrapper">
<div class="parent">parent parent
<div class="child">child child child</div>
</div>
</div>回答by TheShrew
Some of these answers do work, but setting position: absolute;and z-index: 10;seemed pretty strong just to achieve the required effect. I found the following was all that was required, though unfortunately, I've not been able to reduce it any further.
其中一些答案确实有效，但设置position: absolute;和z-index: 10;似乎非常强大，只是为了达到所需的效果。我发现以下是所需的全部内容，但不幸的是，我无法进一步减少它。
HTML:
HTML：
<div class="wrapper">
<div class="parent">
<div class="child">
...
</div>
</div>
</div>
CSS:
CSS：
.wrapper {
position: relative;
z-index: 0;
}
.child {
position: relative;
z-index: -1;
}
I used this technique to achieve a bordered hover effect for image links. There's a bit more code here but it uses the concept above to show the border over the top of the image.
我使用这种技术来实现图像链接的边框悬停效果。这里有更多的代码，但它使用上面的概念来显示图像顶部的边框。
回答by Edd Tillen
Cracked it. Basically, what's happening is that when you set the z-index to the negative, it actually ignores the parent element, whether it is positioned or not, and sits behind the next positioned element, which in your case was your main container. Therefore, you have to put your parent element in another, positioned div, and your child div will sit behind that.
破解了。基本上，发生的情况是，当您将 z-index 设置为负数时，它实际上会忽略父元素，无论它是否定位，并位于下一个定位元素的后面，在您的情况下，它是您的主容器。因此，您必须将父元素放在另一个定位的 div 中，而您的子 div 将位于其后面。
Working that out was a life saver for me, as my parent element specifically couldn't be positioned, in order for my code to work.
解决这个问题对我来说是一个救星，因为我的父元素无法定位，以便我的代码工作。
I found all this incredibly useful to achieve the effect that's instructed on here: Using only CSS, show div on hover over <a>
我发现所有这些对于实现此处指示的效果非常有用：仅使用 CSS，在悬停在 <a> 上时显示 div
回答by Divya Manian
You would need to use position:relativeor position:absoluteon both the parent and child to use z-index.
您需要在父级和子级上使用position:relativeorposition:absolute才能使用z-index.
回答by carillonator
Since your divs are position:absolute, they're not really nested as far as position is concerned. On your jsbin page I switched the order of the divs in the HTML to:
由于您的 div 是position:absolute，因此就位置而言，它们并没有真正嵌套。在您的 jsbin 页面上，我将 HTML 中 div 的顺序切换为：
<div class="child"><div class="parent"></div></div>
and the red box covered the blue box, which I think is what you're looking for.
红色盒子盖住了蓝色盒子，我想这就是你要找的东西。
回答by OBL
style:
风格：
.parent{
overflow:hidden;
width:100px;
}
.child{
width:200px;
}
body:
身体：
<div class="parent">
<div class="child"></div>
</div>
