Announcement

Collapse
No announcement yet.

How to position absolute and sticky at the same time

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to position absolute and sticky at the same time

    Hello,

    I've got a scrollable div with a list of items in it:



    I want to add a panel overtop it with 50% opacity. It should remain fixed at the top with the list of item visible behind it:



    For the above image, I specified the CSS of the panel like so:

    <div style="width: 100%; height: 200px; background-color: black; opacity: 0.5; z-index: 10; position: absolute; top: 0; left: 0;"></div>

    This accomplishes the requirement of having the list of item behind it visible, but it doesn't remain fixed when I scroll.

    So then I tried this:

    <div style="width: 100%; height: 200px; background-color: black; opacity: 0.5; z-index: 10; position: sticky; top: 0; left: 0;"></div>



    That fixed the panel but as you can see from the image above, it pushes the list of items down so that they don't appear behind the panel.

    What would be the solution to this?
    Attached Files

  • #2
    I don't have my reference books handy, but I think the code should be position: fixed; not sticky. *lol* I could be wrong though.
    Cat-herder Extraordinaire

    Comment

    Working...
    X