如何忽略父元素的溢出：隐藏在css中

Question

我有一个 div 元素包装其他 div 元素，如下所示：

 <div style="overflow:hidden">
    <div id="a"></div>
    <div id="b"></div>
</div>

我还有其他管理外部 div 尺寸的 CSS 规则。在我的实际代码中，我想将 div#a 定位在外部 div 下方 10 px 处。但是，我希望 div#b 仍然被外部 div 的溢出：隐藏。

实现这一目标的最佳方法是什么？

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

方法一

一个好的方法是将溢出元素设置为 position:fixed （这将使其忽略父溢出），然后使用以下技术将其相对于父定位：

 ​.parent {
   position: relative;
   .fixed-wrapper {
       position: absolute;
       .fixed {
           position: fixed;
       }
   }
}

需要注意的是，您不能在固定元素上设置任何顶部、右侧、左侧、底部属性（它们都必须是默认的“自动”）。如果您需要稍微调整位置，您可以使用正/负边距来代替。

方法二

我最近发现的另一个技巧是将 overflow:hidden 元素与 position:static 一起保留，并将覆盖元素相对于更高的父级（而不是 overflow:hidden ）。像这样：

http://jsfiddle.net/kv0bLpw8/

原文由 parliament 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 #wrapper {
  width: 400px;
  height: 50px;
  position: relative;
  z-index: 1000;
  left: 0px;
  top: 0px;
}

#wrapper #insideDiv {
  width: 400px;
  height: 50px;
  overflow: hidden;
  position: absolute;
  z-index: 2000;
  left: 0px;
  top: 0px;
}

#wrapper #a {
  position: absolute;
  height: 30px;
  width: 100px;
  bottom: -40px;
  z-index: 1000;
  left: 0px;
}

 <div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>

原文由 Ghassan Elias 发布，翻译遵循 CC BY-SA 4.0 许可协议