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

Answer 2

来自CSSTricks z-index：

另请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不会高于元素B.

这正是您尝试做的事情。如果您希望.line落后于.box，则其.info儿童永远不会出现在.box之上，因为它的父母本身就落后了它

为了达到您想要的效果，您应该更改HTML结构，以便.info在.line之外。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: