當元素在頂部邊框溢出時，爲什麼沒有滾動條？

由於具有一定的規模和overflow:auto並且也絕對定位的子元素絕對定位的元素，掛靠父元素的左下角，超越它的大小，就像這樣：當元素在頂部邊框溢出時，爲什麼沒有滾動條？

#container { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100px; 
    height: 100px; 
    overflow: auto; 
} 
#content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 50%; 
    height: 200%; 
}

爲什麼沒有垂直滾動條出現在父元素上？

當我將子元素的位置更改爲頂部而不是底部時，會出現滾動條。看起來滾動條僅在內容在父元素的底部邊緣溢出時纔可見。爲什麼會這樣？

這裏是鏈接到的jsfiddle演示問題：http://jsfiddle.net/qGsd3/14/

來源

2013-12-10 vsa

你不能強迫溢出頂端... – DaniP

我看到了，但我很好奇爲什麼。 – vsa

該規範似乎說它應該處理來自頂部的溢出，http://www.w3.org/TR/css-overflow-3/#overflow-properties也許這是一個錯誤。我有一種感覺，絕對定位的東西是拋棄它的東西，關於被定位在最上面的力量流動下來的東西，但流動不能被強迫以相同的方式，所以你不會滾動 – Don

我希望得到一個更有趣的答案，但它似乎是：「因爲規範是這樣說的。「

編輯：我只是意識到這不是正確的部分...但幸運的是，我找到了正確的答案，所以答案立場。

http://www.w3.org/TR/2007/WD-css3-box-20070809/#abs-non-replaced-width

在底部有計算高度時規定的規則，以及如何和它規定只有當底部它擴展了高度溢出。關於這會如何影響溢出的問題有更多的閱讀，所以只是徘徊。

來源

2013-12-10 19:53:55 Don

您是否可以根據需要添加一段摘錄（爲了清晰起見，需要進行編輯）？ – user2864740

-1

絕對元素不佔用任何空間，這就是原因。你的內容不需要絕對定位，將它改爲靜態，我無法理解你在那裏試圖完成什麼......

來源

2013-12-10 19:40:00 scooterlord

不是真的，絕對定位從流中去除元素，但它們確實佔用空間，看着小提琴，它很好地證明了這一點 – Don

我想這是一個溝通和表達問題，而不是一個'語義上'是正確的答案。無論如何 – scooterlord

我剛剛注意到它的頂部和底部邊緣的行爲不同（請參閱鏈接的JSFiddle進行並排比較）。沒有什麼我想要解決的。 – vsa

-1

根據我的經驗，在另一個絕對位置內嵌套的絕對位置給了我什麼，但頭痛。另外，對於高度，根據瀏覽器的不同，百分比可能會被擊中或錯過。看看這裏看看我在'壞'類上做了什麼來顯示溢出。

#container { 
position: relative; 
width: 100px; 
height: 100px; 
overflow: auto; 
background: green; 
text-align: right; 
top: 100px; 
} 
.left { 
left: 100px; 
} 
.right { 
left: 300px; 
} 
#content { 
position: absolute; 
width: 50%; 
height: 100px; 
background: red; 
} 
.good { 
top: 0; 
left: 0; 
} 
.bad { 
bottom: -20px; 
left: 0; 
}

http://jsfiddle.net/qGsd3/39/

來源

2013-12-10 19:59:08 Rob

這並不回答所問的問題，他不是試圖解決任何問題，只是問「爲什麼」 – Don

當元素在頂部邊框溢出時，爲什麼沒有滾動條？

回答

相關問題