Question

我正在尝试将div显示为内嵌内容以下的部分背景，其中包含div但高于其容器的背景。如果我将仅部分背景的z-index设置为-1，它将显示在背景后面。但是，如果我将包含div的z-index设置为1，而包含的div的z-index为-1，则会根据需要显示。

有人可以向我解释为什么会这样，以及这是否是一种可靠的方法？

.container {
  position: relative;
  width: 80%;
  height: 18px;
  padding: 6px 10px;
  background: #666;
  z-index: 1;
}

.partialbg {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 30px;
  width: 80%;
  background: #0CC;
  z-index: -1;
}

<div class="container">Text here
  <div class="partialbg"></div>
</div>

Answer 1

发生这种情况的原因是因为有一个孩子和一个父母。如果您在父级上设置了z-index，则子级将会相同，因为z-index已堆叠。

因此，通过在父级上设置z-index 1，孩子现在也是1。

孩子有系统地不可能在父母身后，因为这没有任何意义。但是，该文字是孩子的兄弟。通过在孩子身上设置z-index -1，孩子和父母之间几乎没有任何影响，但是由于兄弟姐妹受到影响，孩子现在已经落后于兄弟姐妹。

Z-index低于文本但高于背景

1 个答案: