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

Question

我有一个div元素包装其他div元素,如下所示:

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

我有其他css规则来管理外部div的维度.在我的实际代码中,我想将div #a放在外部div下方10 xx处.但是,我希望div#b仍然被外部div的溢出切断:隐藏.

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

Answer 1

方法1

一个好方法是将溢出元素设置为position:fixed(这将使其忽略父溢出),然后使用此技术将其相对于父元素定位:

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

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

方法2

我最近发现的另一个技巧是保持overflow:hidden元素,position:static并将覆盖元素相对于更高的父元素(而不是overflow:hidden父元素)定位.像这样:

http://jsfiddle.net/kv0bLpw8/