如何忽略父元素的溢出:隐藏在CSS中 [英] How to ignore parent element's overflow:hidden in css

问题描述

我有一个div元素，包裹着其他div元素，如下所示:

I have a div element wrapping other div elements like so:

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

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

I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.

实现此目标的最佳方法是什么?

What is the best way to achieve this?

推荐答案

方法1

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

A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:

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

一个警告是，您不能在固定元素上设置任何top，right，left，bottom属性(它们都必须默认为'auto').如果您需要稍微调整位置，则可以使用正/负边距代替.

One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.

方法2

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

Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:

http://jsfiddle.net/kv0bLpw8/

这篇关于如何忽略父元素的溢出:隐藏在CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！