Why relatively positioned element overlaps a sticky element?

Question

Header has position: sticky, and is followed by some content.

When a following element has position: relative (e.g. Hero in the example below), it overlaps the sticky Header when the page is scrolled.

Why is this happening?

What's the idiomatic way to avoid the overlap?

Is defining a z-index necessary?

body {
  margin: 0;
}

.container {
  width: 200px;
  background-color: #eee;
}

.header {
  background-color: #ccc;
  height: 40px;
  line-height: 40px;
  position: sticky;
  top: 0;
}

.hero {
  background-color: #ddd;
  height: 60px;
  line-height: 60px;
  /* This causes the overlap */
  position: relative;
}

<div class="container">
  <div class="header">Header</div>
  <div class="hero">Hero</div>
  <p>
    Sed augue lacus viverra vitae congue eu consequat ac. Diam sollicitudin tempor id eu nisl nunc mi. Massa massa ultricies mi quis hendrerit dolor magna eget est. Maecenas sed enim ut sem. Bibendum arcu vitae elementum curabitur vitae nunc. Diam vel quam
    elementum pulvinar etiam non quam lacus. Lobortis mattis aliquam faucibus purus in massa tempor. Suspendisse sed nisi lacus sed viverra tellus in. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Eget egestas purus
    viverra accumsan in. Massa tempor nec feugiat nisl pretium fusce id. Egestas sed sed risus pretium quam vulputate dignissim. Magna sit amet purus gravida quis blandit turpis cursus in. Integer enim neque volutpat ac tincidunt vitae. Adipiscing commodo
    elit at imperdiet dui accumsan sit. Magna ac placerat vestibulum lectus mauris ultrices. A diam maecenas sed enim ut sem. Ultrices eros in cursus turpis massa tincidunt dui. Est ullamcorper eget nulla facilisi etiam dignissim. Convallis tellus id
    interdum velit laoreet id donec. Ullamcorper malesuada proin libero nunc consequat interdum varius.
  </p>
</div>

Yes you would need to define a z-index so that your `sticky` element stays on top of background (scrolling). Let me know if I can post that as an answer that you can accept. — Utsav Patel, Mar 24 '20 at 06:41
from the duplicate : *All positioned, opacity or transform descendants, in tree order that fall into the following categories* --> both your element are postionned (one sticky and ther other relative) so the last one in the code will overlap the first one — Temani Afif, Mar 24 '20 at 09:05
@TemaniAfif From the Painting Order spec it looks like both elements fall into step 8, so to if I wanted the Header to be on top the next step is to use z-index, right? — Misha Moroshko, Mar 24 '20 at 21:55
yes, adding z-index will make one of them fall into the step (9) and you are sure it will be on the top — Temani Afif, Mar 24 '20 at 21:59

score 0 · Answer 1 · answered Mar 24 '20 at 06:51

You need to add z-index property in .header class if you define position:relative in bottom of any element so you can just remove position:relative from .here class or bottom element of header.

body {
  margin: 0;
}
.container {
  width: 200px;
  background-color: #eee;
}
.header {
  background-color: #ccc;
  height: 40px;
  line-height: 40px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.hero {
  background-color: #ddd;
  height: 60px;
  line-height: 60px;
  /* This causes the overlap */
  position: relative;
}

<div class="container">
  <div class="header">Header</div>
  <div class="hero">Hero</div>
  <p>
    Sed augue lacus viverra vitae congue eu consequat ac. Diam sollicitudin tempor id eu nisl nunc mi. Massa massa ultricies mi quis hendrerit dolor magna eget est. Maecenas sed enim ut sem. Bibendum arcu vitae elementum curabitur vitae nunc. Diam vel quam
    elementum pulvinar etiam non quam lacus. Lobortis mattis aliquam faucibus purus in massa tempor. Suspendisse sed nisi lacus sed viverra tellus in. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Eget egestas purus
    viverra accumsan in. Massa tempor nec feugiat nisl pretium fusce id. Egestas sed sed risus pretium quam vulputate dignissim. Magna sit amet purus gravida quis blandit turpis cursus in. Integer enim neque volutpat ac tincidunt vitae. Adipiscing commodo
    elit at imperdiet dui accumsan sit. Magna ac placerat vestibulum lectus mauris ultrices. A diam maecenas sed enim ut sem. Ultrices eros in cursus turpis massa tincidunt dui. Est ullamcorper eget nulla facilisi etiam dignissim. Convallis tellus id
    interdum velit laoreet id donec. Ullamcorper malesuada proin libero nunc consequat interdum varius.
  </p>
</div>

Why relatively positioned element overlaps a sticky element?

1 Answers1