如何让父元素出现在子元素上方

Question

我有两个嵌套的 CSS 元素。我需要让父元素位于子元素的顶部，即 z 轴上方。仅设置 z-index 是不够的。

我无法在子项上设置负 z 索引，这会将其设置为实际页面上的页面容器下方。这是唯一的方法吗？

http://jsbin.com/ovafo/edit

.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>

Answer 1

为子级设置一个负的 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>

https://jsfiddle.net/uov5h84f/

Answer 2

幸运的是，存在解决方案。您必须为父级添加一个包装器并更改此包装器的 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>

Answer 3

其中一些答案确实有效，但设置 position:absolute; 和 z-index: 10; 似乎足以达到所需的效果。我发现以下内容就是所需的全部内容，但不幸的是，我无法进一步减少它。

HTML：

<div class="wrapper">
    <div class="parent">
        <div class="child">
            ...
        </div>
    </div>
</div>

CSS：

.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

我使用这种技术来实现图像链接的边框悬停效果。这里有更多的代码，但它使用上面的概念来显示图像顶部的边框。

http://jsfiddle.net/g7nP5/

Answer 4

您需要在父级和子级上都使用 position:relative 或 position:absolute 才能使用 z-index。

Answer 5

由于您的 div 是 position:absolute，因此就位置而言，它们并不是真正嵌套的。在你的 jsbin 页面上，我将 HTML 中的 div 顺序切换为：

<div class="child"><div class="parent"></div></div>

并且红色框覆盖了蓝色框，我认为这就是你正在寻找的。

Answer 6

破解了它。基本上，发生的情况是，当您将 z-index 设置为负数时，它实际上会忽略父元素，无论它是否定位，并位于下一个定位元素的后面，在您的情况下，该元素是您的主容器。因此，您必须将父元素放在另一个定位的 div 中，并且您的子 div 将位于其后面。

解决这个问题对我来说是一个救星，因为我的父元素特别无法定位，以便我的代码正常工作。

我发现所有这些对于实现此处指示的效果非常有用： 仅使用 CSS ，将鼠标悬停在 上时显示 div

Answer 7

款式：

.parent{
  overflow:hidden;
  width:100px;
}

.child{
  width:200px;
}

本体：

<div class="parent">
   <div class="child"></div>
</div>