父级溢出隐藏不隐藏位置固定子级

Question

我想隐藏位置固定的子元素的溢出。

参见下面的轴例。我试图将黄色方块隐藏在溢出隐藏区域之外。

.whatever-content {
  height: 200px;
  background: red;
}

.content {
  height: 200px;
  background: green;
}

.position-fixed {
  position: fixed;
  background: yellow;
  height: 100px;
  width: 200px;
  right: 0;
  top: 0;
}

.overflow-hidden {
  overflow: hidden;
}

<div class="whatever-content"></div>
<div class="overflow-hidden">
    <div class="position-fixed"></div>
    <div class="content"></div>
</div>
<div class="whatever-content"></div>

Answer 1

如果一个元素是固定的，那么无论当前的 DOM 位置如何，它本质上都是相对于 body 的绝对定位。因此溢出隐藏没有达到预期的效果。

就像@Mehdi提到的，body元素的填充/边距就是您在这里看到的，您可以通过设置 body { margin: 0; 来隐藏它填充：0； }

你真正想要实现什么？

如果你想实现分层，你可以使用 z-index 来实现（适用于位置：绝对/相对/粘性/固定）。 z-index 较高意味着它位于另一个之上。

如果您希望您的元素绝对定位在另一个元素内，请使用 position: relative 定义

outside div

和 inside div

position: absolute

- 也许这就是您想要的。现在，您可以将

overflow: hidden

添加到“外部 div”，并且如果您设置例如

top: -10px;

;-)

，则“内部 div”将被切断

查看职位文档：https://developer.mozilla.org/en-US/docs/Web/CSS/position 请参阅 z-index 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index