html - 将子元素定位在 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 ) 实际上应该是一个更大的矩形，但你看不到它的原因是因为它隐藏在灰色 .box 后面.

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

Answer 1

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

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

这应该可以解决问题。

编辑:将 .info div 移到 .line 之外 E.g.

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;
}