Question

我希望我的内部div（颜色为红色）在其父div之外不可见，这是蓝色的。我使用overflow: hidden;，但似乎没有用。我想只使用CSS实现这一点，因为当我在SharePoint中创建页面时，JavaScript会给我带来麻烦。

有谁知道如何隐藏溢出？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

fixed element 相对于浏览器窗口;没有考虑父元素的位置。

为了使您的内部元素包含在父元素中，您需要使用不同的定位。在这种情况下，您可能正在寻找 absolute positioning （使用position: absolute），该位置相对于具有已定义position的第一个祖先（在这种情况下，.outer父母。）

.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/>

希望这有帮助！：）

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

1 个答案: