CODEWITHSUNDEEP
css
Artur K.
Artur K.

Reputation: 3309

Displaying one div below another

I'm clueless how to get the scrollbar display below the active box - list item.

After searching I have found that the z-index should work on element positioned other than static. But still I'm still unable to produce the desired effect.

This is just one part of my problem, I believe if I understand the solution to this one, I can also fix another similar problem.

Somehow the active box is displayed on top of the scrollbar, but not the scrollbar's handle.

Here's the JsFiddle. Should be quite easy to notice my problem.

The desired effect is that the scrollbar and everything related to it (handle) is displayed below the active(longer, red) box.

Sorry, don't really see a way to accompany this problem with code inside the post or how to make the JsFiddle with less code.

Upvotes: 0

Views: 146

Answers (1)

Serlite
Serlite

Reputation: 12258

I think you'll have to apply a z-index to the .scrollbar element itself, rather than its child .scroller. Add these styles to your definition of it:

.scrollbar {
    z-index:-1;
    position:relative;
}

And you should get (what I hope is) your desired behaviour. Here's an updated JSFiddle for you to see what this achieves. If this isn't what you were looking for, feel free to let me know and I'll be happy to help further. Good luck!

Upvotes: 1

Related Questions