以上可滚动div没有覆盖其滚动条
以上可滚动div没有覆盖其滚动条
提问于 2014-01-16 02:55:07
我有一个可滚动的div，我想在上面放一条信息。我这样做是通过将可滚动div中的内容抵消30 to，并添加一个位置:绝对div，它的顶部高30 to。但是，我遇到了这样的问题:这个div覆盖它下面的div滚动条。如果不覆盖滚动条，我如何将消息放在可滚动div的顶部？
下面是我的代码的一个快速示例。注意，滚动条由红色div覆盖：
http://jsfiddle.net/S4mXy/1
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-16 06:18:12
下面的css风格对您有帮助。您应该将z-index添加到粘性文件中。
#sticky
{
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
position:absolute;
z-index:-1;
}Stack Overflow用户
发布于 2014-01-16 05:23:22
无论是绝对的还是相对的，你都需要有两个DIVs。我将粘贴div移到可滚动div之外，并移除绝对定位，并将其固定为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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21152542
复制相关文章
相似问题
腾讯云开发者
