CSS - 您可以创建一个与父 div 重叠的 div，同时将父级设置为“overflow:auto”吗？

Question

我有一个可滚动的 div，其中溢出设置为自动。 在该 div 中，我想将一些项目扩展到可滚动父 div 的边框之外。

如果我将可滚动div设置为overflow:hidden，position:relative，并将子div设置为position:absolute，这没有问题，但是一旦我将可滚动div设置为overflow:auto，可滚动div就会进一步滚动包含子 div。

另外，如果我将子div设置为position:fixed，它会与父div重叠，但是当我滚动时，子div不会滚动。

有什么方法可以实现我想要做的事情吗？

谢谢

Answer 1

是的，您可以借助 CSS 的

z-index

属性来实现所需的输出。

更具体地说，在子 div 上使用比父 div 更高的

z-index

值。此外，在这种情况下添加

container

div 也有很大帮助。

试试这个：

.container {
  position: relative;
  width: 10rem;
  height: 10rem;
}

.parent {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: pink;
  overflow: auto;
}

.child {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  z-index: 2;
  width: 5rem;
  height: 5rem;
  background: skyblue;
}

<div class="container">
  <div class="parent">
    Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br> Parent Content <br>
  </div>
  <div class="child"></div>
</div>