当宽度设置为 inner-div 时，Z-Index 不适用于 border-right

Question

这让我很困惑。我将 border-right、border-left 和 border-bottom 应用于 div，其中有另一个绿色 BG 颜色 div。我在带有边框的父 div 上设置了 z-index: 1 和 position: relative。

但是，正如您在照片中看到的，只有左边框应用了 z-index，而右边框没有应用 z-index 并且落后于绿色 div .

只有当我在 inner-div 上设置的宽度比外部 div 宽时才会发生这种情况，而且它似乎只是防止第一个右边界出现在 bg 之上，作为重复元素不会遇到这个问题。

这没有任何意义，并且在 Chrome、Firefox 和 Edge 中是一致的。

这是我刚刚发现的 CSS 的一些奇怪的怪癖/错误吗？还是我完全搞砸了？

.flex-div {
  display: flex;
}

.outer-div {
    position: relative;
    border-right: 7px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 7px solid #cccccc;
    z-index: 1;
    max-width: 200px;
    flex: 0 0 200px;
}

.mid-div {
  width: 600px;
  z-index: -1;
  position: relative;
}

.inner-div {
    background-color: #00b989;
    width: 250px;
    height: 50px;
    display: inline-block;
    z-index: -1;
    position: relative;

}

<div class="flex-div"> 
  <div class="outer-div"> outer
    <div class="mid-div"> 
      <div class="inner-div">inner</div>
      <div class="inner-div">inner</div>
    </div>  
  </div>
  <div class="outer-div"> outer  </div>
  <div class="outer-div"> outer  </div>
<div>

你能帮我诊断一下发生这种情况的原因，以及让 outer-div 左右两侧的边框覆盖 -inner-div 的任何解决方法吗？

Answer 1

您无法控制与其 children 相关的 z-index，因为它们包含在内（某种意义上）继承了 z-index .

但是您可以通过将 z-index 设置为 -1 来使 children 落后于他们的 parent。

.outer-div {
    position: relative;
    flex: 0 0 200px;
    border: 7px solid #cccccc;
    max-width: 200px;
}

.inner-div {
    background-color: #00b989;
    width: 250px;
    height: 50px;
    position:relative;
    z-index:-1;
}

<div class="outer-div"> outer
    <div class="inner-div">inner</div>
  </div>

或者您可以在 parent 上应用 overflow:hidden，以便在较大时隐藏绿色条（如果满足您的需要）

.outer-div {
    flex: 0 0 200px;
    border: 7px solid #cccccc;
    max-width: 200px;
    overflow:hidden;
}

.inner-div {
    background-color: #00b989;
    width: 250px;
    height: 50px;
}

<div class="outer-div"> outer
    <div class="inner-div">inner</div>
  </div>

Answer 2

要解决您的问题，您需要将 z-index 应用于子元素而不是父元素（让父元素保持 z-index auto）

顶部所有边框：

.flex-div {
  display: flex;
}

.outer-div {
    border-right: 7px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 7px solid #cccccc;
    max-width: 200px;
    flex: 0 0 200px;
}

.mid-div {
  width: 600px;
  z-index: -1;
  position: relative;
}

.inner-div {
    background-color: #00b989;
    width: 250px;
    height: 50px;
    display: inline-block;
    z-index: -1;
    position: relative;

}

<div class="flex-div"> 
  <div class="outer-div"> outer
    <div class="mid-div"> 
      <div class="inner-div">inner</div>
      <div class="inner-div">inner</div>
    </div>  
  </div>
  <div class="outer-div"> outer  </div>
  <div class="outer-div"> outer  </div>
<div>

底部全部边框

.flex-div {
  display: flex;
}

.outer-div {
    border-right: 7px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 7px solid #cccccc;
    max-width: 200px;
    flex: 0 0 200px;
}

.mid-div {
  width: 600px;
  z-index: 1;
  position: relative;
}

.inner-div {
    background-color: #00b989;
    width: 250px;
    height: 50px;
    display: inline-block;
    z-index: -1;
    position: relative;

}

<div class="flex-div"> 
  <div class="outer-div"> outer
    <div class="mid-div"> 
      <div class="inner-div">inner</div>
      <div class="inner-div">inner</div>
    </div>  
  </div>
  <div class="outer-div"> outer  </div>
  <div class="outer-div"> outer  </div>
<div>

要了解您的初始问题，您需要考虑绘画顺序和堆叠上下文。通过将 z-index 应用于父元素，您可以创建一个堆叠上下文，并且由于它们都具有相同的 z-index ，因此它们将根据树顺序进行绘制。因此，我们打印第一个元素及其所有内容，然后打印第二个元素及其所有内容，依此类推。

按照这个逻辑，你会看到第一个元素的左边框和右边框会因为内容溢出而被隐藏，然后你会看到第二个元素的左边框位于所有先前内容的顶部等等。

下面是一个基本示例，可以更好地说明您的问题：

.box {
 border-left:10px solid red;
 border-right:10px solid red;
 height:50px;
 width:100px;
 display:inline-block;
 vertical-align:top;
 position:relative;
 z-index:1;
}
.box > div {
  width:130%;
  height:60%;
  background:blue;
}

<div class="box">
  <div></div>
</div><div class="box" style="margin-top:20px;">
  <div></div>
</div><div class="box" style="margin-top:30px;">
  <div></div>
</div>

为父元素添加了一些偏移量，以便您可以清楚地识别绘制顺序。

现在，如果您将正 z-index 设置为仅子元素，它们将全部绘制在所有父元素的顶部。

.box {
 border-left:10px solid red;
 border-right:10px solid red;
 height:50px;
 width:100px;
 display:inline-block;
 vertical-align:top;
}
.box > div {
  width:130%;
  height:60%;
  background:blue;
 position:relative;
 z-index:1;
}

<div class="box">
  <div></div>
</div><div class="box" style="margin-top:20px;">
  <div></div>
</div><div class="box" style="margin-top:30px;">
  <div></div>
</div>

如果你应用负 z-index 它们都会被涂在后面：

.box {
 border-left:10px solid red;
 border-right:10px solid red;
 height:50px;
 width:100px;
 display:inline-block;
 vertical-align:top;
}
.box > div {
  width:130%;
  height:60%;
  background:blue;
 position:relative;
 z-index:-1;
}

<div class="box">
  <div></div>
</div><div class="box" style="margin-top:20px;">
  <div></div>
</div><div class="box" style="margin-top:30px;">
  <div></div>
</div>

将任何 z-index 值应用于父元素将使您无法实现您想要的，因为子元素将被困在其父元素的堆栈上下文中。

有关更多详细信息的相关问题：

当宽度设置为 inner-div 时，Z-Index 不适用于 border-right

Z-Index does not apply to border-right when width set on inner-div

html

css

user-interface

z-index