CODEWITHSUNDEEP
csshtmlscrollbarcss-position
Keavon
Keavon

Reputation: 7493

Float div above scrollable div without its scroll bar being covered

I have a scrollable div and I want to put a message above it. I'm doing this by offsetting the content in the scrollable div by 30px and adding a position:absolute div that's 30px tall to the top. However, I'm running into the problem where this div covers the scroll bar of the div below it. How can I put a message at the top of a scrollable div without it covering the scroll bar?

 

Here is a quick example of my code. Note the scroll bar is covered by the red div:
http://jsfiddle.net/S4mXy/1

Upvotes: 0

Views: 1544

Answers (2)

Green Wizard
Green Wizard

Reputation: 3657

The following style of css helps you. you should have to add z-index to the sticky

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

Upvotes: 2

Rami Enbashi
Rami Enbashi

Reputation: 3556

You need to have both DIVs either absolute or relative. I moved the sticy div outside the scrollable div and removed the absolute positioning and it fixed it 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);

}

Or, make them both absolute 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);

}

Upvotes: 0

Related Questions