Question

demo address

.father {
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
  border-radius: 6px;
  z-index: 999;
  position: absolute;
  left: 50px;
  top: 50px;
}

.child {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="father">
  <div class="child">

  </div>
</div>

“子”节点的位置是固定的，但被“父”节点切除，如果我调整“父亲”节点的样式，则可以正常显示。例如，我删除了“ z-index：999;”或'border-radius：6px;'或“溢出：隐藏；”或“ position：absolute;”，我删除的每个上方的“子”节点都可以正常显示，谁可以解释呢？有些建议会很棒。

Answer 1

如果您希望父亲div 应该在子div 上，请尝试此操作，这样就无需给出 z-index：999; 要给父亲div分配一个 z-index：-1; 给孩子div。

.father {
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
  border-radius: 6px;
  position: absolute;
  left:50px;
  top:50px;
}

.child{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color: blue;
  z-index: -1;
}

<div class="father">
    <div class="child">
    </div>
</div>

当根节点具有某种样式时，为什么固定不起作用？

1 个答案: