有固定位置的父母和孩子，父母溢出：隱藏的問題

Question

我不知道是否有問題，但我想知道爲什麼overflow:hidden不能在fixed父/子元素上運行。

下面是一個例子：

CSS和HTML：

.parent{ 
 
    position:fixed; 
 
    overflow:hidden; 
 
    width:300px; 
 
    height:300px; 
 
    background:#555; 
 
} 
 
.children{ 
 
    position:fixed; 
 
    top:200px; 
 
    left:200px; 
 
    width:150px; 
 
    height:150px; 
 
    background:#333; 
 
}

<div class="parent"> 
 
    <div class="children"> 
 
    </div> 
 
</div>

現場演示：jsFiddle

Answer 1

由於固定位置元件被固定爲R注意到視口，而不是另一個元素。因此，由於視口不切斷，溢出變得無關緊要。

鑑於一個元件與 位置的位置和尺寸：絕對是相對於其包含塊，位置 並與位置的元素的尺寸：固定總是相 到含初始塊。這通常是視口： 瀏覽器窗口或紙張的頁面框。

REF：http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Answer 2

固定位置元素相對於瀏覽器窗口被定位，所以該父組件是基本上不相關的。

爲了得到你想要的效果，其中父剪輯overflow孩子，使用position: absolute代替：http://jsfiddle.net/DBHUv/1/

Answer 3

我有一個類似的，相當複雜的問題，流動佈局，其中右邊一列有一個固定的寬度和左邊的寬度是可變的。我的固定容器應該與柔性柱具有相同的寬度。這裏是我的解決方案：

HTML

<div id="wrapper"> 
    <div id="col1"> 
    <div id="fixed-outer"> 
     <div id="fixed-inner">inner</div> 
    </div> 
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <div id="col2">COL2</div> 
</div> 

CSS

#wrapper { 
    padding-left: 20px; 
} 

#col1 { 
    background-color: grey; 
    float: left; 
    margin-right: -200px; /* #col2 width */ 
    width: 100%; 
} 

#col2 { 
    background-color: #ddd; 
    float: left; 
    height: 400px; 
    width: 200px; 
} 

#fixed-outer { 
    background: yellow; 
    border-right: 2px solid red; 
    height: 30px; 
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */ 
    overflow: hidden; 
    padding-right: 200px; /* #col2 width */ 
    position: fixed; 
    width: 100%; 
} 

#fixed-inner { 
    background: orange; 
    border-left: 2px solid blue; 
    border-top: 2px solid blue; 
    height: 30px; 
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */ 
    position: absolute; 
    width: 100%; 
} 

現場演示：http://jsfiddle.net/hWCub/

Answer 4

你可以考慮使用CSS clip: rect(top, right, bottom, left);夾固定POSI給父母的元素。請參閱演示http://jsfiddle.net/lmeurs/jf3t0fmf/。

請注意，小心使用！

雖然夾子式的廣泛支持，主要缺點是：

1. 父的位置不能是靜態的或相對的（可以使用一個相對定位的容器內的絕對定位的親本）;
2. 矩形座標不支持百分比，儘管auto值等於100%，即。 clip: rect(auto, auto, auto, auto);;
3. 帶子元素的可能性至少在IE11 & Chrome34中有限制，我們不能將子元素的位置設置爲相對或絕對或者使用像scale這樣的CSS3變換。

查看http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/瞭解更多信息。

編輯：鍍鉻似乎處理的定位和CSS3轉換的子元素應用backface-visibility時好了很多，所以只是爲了確保我們說：

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 

到主子元素。

另請注意，舊版/移動瀏覽器尚未完全支持此功能，也可能需要額外付出一些努力。請參閱我們的實施菜單bellafuchsia.com。

1. IE8顯示菜單很好，但菜單鏈接不可點擊;
2. IE9不顯示摺疊下的菜單;
3. iOS Safari < 5不顯示菜單;
4. iOS Safari 5+在滾動後重新滾動剪輯的內容;
5. FF（至少13+），IE10 +，Chrome和Chrome for Android似乎打得不錯。

編輯2014-11-02：演示網址已更新。

Answer 5

2016更新：

您可以創建一個新的堆疊背景下，Coderwall所見：

<div style="transform: translate3d(0,0,0);overflow:hidden"> 
    <img style="position:fixed; ..." /> 
</div> 

其中提到http://dev.w3.org/csswg/css-transforms/#transform-rendering

對於那些佈局由元素在CSS框模型中，轉換的任何非零值都會導致創建堆棧上下文和包含blo CK。該對象充當固定位置後代的包含塊。

Answer 6

如果你想隱藏的固定位置元素溢出，我發現最簡單的方法是將一個容器元素中的元素，並應用position:fixed和overflow:hidden該元素所包含的元素，而不是（你必須從包含的元素中刪除position:fixed才能工作）。然後應按預期裁剪固定容器的內容。

在我的情況下，我在固定位置元素上使用object-fit:cover時遇到了問題（它溢出到頁面主體的邊界之外，而不管overflow:hidden）。將其放在容器上的overflow:hidden固定容器內固定該問題。