絕對定位的孩子重疊父滾動條

Question

我有一個父div與兩個子div（標題和正文），我想設置標題位置固定在頂部，只有身體應滾動。

HTML

<div class="box"> 
<div class="header">Header</div> 
<div class="body">Body</div> 

CSS

.box { 
height: 300px; 
border: 1px solid #333; 
overflow: auto; 
} 
.header { 
position: absolute; 
width: 100%; 
height: 100px; 
background: #ccc; 
} 
.body { 
height: 300px; 
background: #999; 
margin-top: 101px; 
} 

我發現頭的div重疊父div的滾動條。我不能將父母div位置設置爲相對的，因爲我需要修正標頭位置。我無法將標題位置設置爲「固定」，因爲此內容可以在頁面的某個中間位置顯示。

如何避免絕對定位的孩子不重疊父母的滾動條？

查找的jsfiddle：http://jsfiddle.net/T43eV/1/

Answer 1

這是否幫助？

.box { position:relative; } 

編輯：沒有任何需要使用absolute反正，刪除，並把overflow:auto上.body。

jsFiddle

.box { 
    height: 300px; 
    border: 1px solid #333; 
} 
.header { 
    width: 100%; 
    height: 100px; 
    background: #ccc; 
} 
.body { 
    height: 200px; 
    background: #999; 
    width:100%; 
    overflow: auto; 
} 

編輯：我不認爲你可以跨平臺始終做到這一點。您可以通過將.header上的right屬性設置爲在滾動條上的大小來實現，但滾動條的大小綁定到操作系統並且不是單一大小。

您可以查看iframe，因爲這將在您的頁面，滾動條和所有內容中創建頁面。

Answer 2

overflow屬性應在.body，不.box被設置，因爲這樣的：http://jsfiddle.net/T43eV/8/

Answer 3

如果有幫助設置的z-index：-1 .header和報頭將不會重疊的滾動條。

Here is the working fiddle: 

http://jsfiddle.net/T43eV/28/