Relative positioned content goes above sticky positioned header

Asked Jun 03 '19 at 11:01

Active Jun 03 '19 at 11:23

Viewed 1,000 times

Have a look at following code snippet.

<div class="container">
    <div class="header" style="position:sticky;top:0">
        Header
    </div>
    <div class="content" style="position:static">
        Page content
        ...
    </div>
</div>

Here while scrolling page down, content goes below the header. All work as expected.

But if I change 'content' div positioning to relative, content starts to goes over the sticky header while scrolling page.

Why this happens? Is there a solution for this without using z-index?

edited Jun 03 '19 at 11:23

asked Jun 03 '19 at 11:01

hirantha129

1

Use `z-index` [read more here](https://www.w3schools.com/cssref/pr_pos_z-index.asp) – Marc Hjorth Jun 03 '19 at 11:07
I wouldn't know. But I see the same. What's the reason that you'd want the content to be positioned relatively? (May there's another work-around?) – Frank Conijn - Support Ukraine Jun 03 '19 at 11:36
@FrankConijn In real case I am introducing sticky header to existing web application. Therefore some existing contents are relative. – hirantha129 Jun 03 '19 at 11:43
I understand. Does this help: https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning? – Frank Conijn - Support Ukraine Jun 03 '19 at 11:49

Relative positioned content goes above sticky positioned header

0 Answers0