如何使用 CSS 防止固定元素溢出？

Question

我希望我的内部 div（红色）在其父 div（蓝色）之外不可见。我使用了overflow: hidden;，但这似乎不起作用。我只想使用 CSS 来实现这一点，因为当我在 SharePoint 中制作页面时，JavaScript 会给我带来问题。

有人知道如何隐藏溢出吗？

.container {
  left: 0px;
  width: 800px;
  height: 1200px;
  background: green;
}

.outer {
  position: absolute;
  left: 0px;
  width: 600px;
  height: 1000px;
  background: blue;
  overflow: hidden;
}

.inner {
  position: fixed;
  width: 100px;
  height: 600px;
  background: red;
  margin-left: 0px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

<br/><br/><br/><br/><br/><br/>

Answer 1

fixed element相对于浏览器窗口定位；不考虑父元素的位置。

为了让你的内部元素包含在父元素中，你需要使用不同的定位。在这种情况下，您可能正在寻找 absolute positioning（带有 position: absolute），它相对于第一个具有已定义 position（在本例中为 @987654326 @父母）。

.container {
  left: 0px;
  width: 800px;
  height: 1200px;
  background: green;
}

.outer {
  position: absolute;
  left: 0px;
  width: 600px;
  height: 1000px;
  background: blue;
  overflow: hidden;
}

.inner {
  position: absolute;
  width: 100px;
  height: 600px;
  background: red;
  margin-left: 0px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

<br/><br/><br/><br/><br/><br/>

希望这会有所帮助！ :)