5

我试图让一个 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>

4

1 回答 1

7

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

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

孩子不可能落后于父母，因为这没有任何意义。但是，文本是child的兄弟。通过在孩子上设置 a of ，孩子和父母之间基本上没有影响，但是由于兄弟姐妹受到影响，孩子现在落后于兄弟姐妹。z-index-1

于 2013-10-22T16:34:22.657 回答