Question

我有一个可滚动的div，我想在它上面添加一条消息。我这样做是通过将可滚动div中的内容偏移30px并添加一个位置：绝对div，其高度为30px。但是，我遇到了这个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都是绝对的或相对的。我将sticy 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);

}

在可滚动div上方浮动div而不覆盖其滚动条

2 个答案: