将子元素定位在 z-index 大于其父元素的元素上方

Question

正如标题所说，我正在尝试将一个元素定位在 z-index 大于其父元素的元素上方。

例如，我有以下 HTML：

HTML：

<div class="line">
    <div class="info"></div>
</div>
<div class="box"></div>

和 CSS：

body {
    margin: 50px;
}

.box {
    background: grey;
    width: 500px;
    height: 40px;
    z-index: 10;
    position: relative;
}

.line {
    background: blue;
    width: 500px;
    height: 5px;
    z-index: 9;
    position: relative;
    top: 0;
    overflow: visible;
}

.line .info {
    width: 50px;
    height: 25px;
    background: red;
}

正如你在jsfiddle 中看到的那样，红线 (.info) 实际上应该是一个更大的矩形，但你看不到它的原因是因为它隐藏在灰色 @ 后面987654326@.

如何更改z-index 的周围，使红色框显示在灰色框上方，而蓝色.line 留在灰色框后面？

Answer 1

如果您将 .line 的 z-index 设置为高于 .box 的 z-index，这将导致红色框显示在灰色框之上：

.box{
    z-index: 1
}
.line {
    z-index: 2
}

这应该可以解决问题。

编辑： 将 .info div 移到 .line 之外，例如

HTML：

<div class="line"></div>
<div class="info"></div>
<div class="box"></div>

CSS：

.box {
    z-index:10;
}
.line {
    z-index:9;
}
.box {
    z-index:11;
}

Answer 2

来自CSSTricks z-index：

还要注意嵌套起着重要作用。如果元素 B 位于元素 A 之上，则元素 A 的子元素永远不会高于元素 B。

这正是您想要做的。如果你想让.line 在.box 后面，它的子.info 永远不能出现在.box 的顶部，因为它的父本身在它后面。

为了实现你想要的，你应该改变你的HTML结构，使.info在.line之外。

例如：

.box {
  position: relative;
  z-index: 1;
  width: 500px;
  height: 40px;
  background: grey;
}
.box .info {
  width: 50px;
  height: 25px;
  background: red;
}
.line {
  position: relative;
  top: 45px;
  width: 500px;
  height: 50px;
  background: blue;
}

<div class="line"></div>
<div class="box">
  <div class="info"></div>
</div>