Why relatively positioned element overlaps a sticky element? [duplicate] - css

Question

This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
One element's position is absolute, the other's position is relative, which one is the upper
(2 answers)
Why using absolute position causes the div to be on top?
(3 answers)
Closed 2 years ago.
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>

Answer 1

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>