浮动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); 

}