浮動DIV上面滾動的div沒有它的滾動條覆蓋

Question

我有一個滾動的div，我想提出一個消息，它上面。我通過將可滾動div中的內容偏移30px並添加一個位置：頂部爲30px的絕對div來實現此目的。但是，我遇到了這個div覆蓋它下面的div的滾動條的問題。我怎樣才能把一個消息放在一個可滾動div的頂部而沒有它覆蓋滾動條？

這是我的代碼的一個簡單例子。注意滾動條被紅色div覆蓋：
http://jsfiddle.net/S4mXy/1

Answer 1

以下款式css可以幫到你。你應該添加z-index粘性

#sticky 
{ 
    width:200px; 
    height:30px; 
    background-color:rgba(255, 0, 0, 0.39); 
    position:absolute; 
    z-index:-1; 
} 

Answer 2

您需要同時具有絕對或相對的DIV。我搬到外面的滾動div的，sticy股利和刪除絕對定位和它固定它http://jsfiddle.net/S4mXy/3/

HTML：

<div id="sticky"></div> 
    <div id="scrollable"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at felis dolor. Cras et sagittis leo. Aenean facilisis rutrum odio, in volutpat ante pulvinar nec. Fusce pulvinar magna in consequat consequat. Vivamus hendrerit adipiscing magna quis malesuada. Sed metus odio, gravida quis purus in, lobortis facilisis ligula. Donec ac tristique nibh, ullamcorper feugiat diam. Integer rhoncus vehicula ornare. Aenean ut posuere lectus. Mauris in enim posuere, volutpat erat at, blandit sapien. Cras quis adipiscing quam. Donec convallis elementum est, vitae placerat ante scelerisque ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at felis dolor. Cras et sagittis leo. Aenean facilisis rutrum odio, in volutpat ante pulvinar nec. Fusce pulvinar magna in consequat consequat. Vivamus hendrerit adipiscing magna quis malesuada. Sed metus odio, gravida quis purus in, lobortis facilisis ligula. Donec ac tristique nibh, ullamcorper feugiat diam. Integer rhoncus vehicula ornare. Aenean ut posuere lectus. Mauris in enim posuere, volutpat erat at, blandit sapien. Cras quis adipiscing quam. Donec convallis elementum est, vitae placerat ante scelerisque ut. 
    </p> 
</div> 

CSS＃1：

#scrollable 
{ 
    width:200px; 
    height:400px; 
    overflow-y:scroll; 
} 
#scrollable p 
{ 
    margin-top:30px; 
} 
#sticky 
{ 
    width:200px; 
    height:30px; 
    background-color:rgba(255, 0, 0, 0.39); 

} 

或者，讓他們無論是絕對http://jsfiddle.net/S4mXy/4/ ：

CSS＃2：

#scrollable 
{ 
    position:absolute; 
    top:35px; 
    width:200px; 
    height:400px; 
    overflow-y:scroll; 
} 
#scrollable p 
{ 
    margin-top:30px; 
} 
#sticky 
{ 
    position:absolute; 
    width:200px; 
    height:30px; 
    background-color:rgba(255, 0, 0, 0.39); 

}