HTML / CSS - Create a sticky overlay - html

Question

I'm working on a projet (HTML and CSS page) in which I have a navbar at the top of the page, a main container below the navbar, and a menu at the left.
The menu is hidden, and when I move the mouse to the left edge of the window, it appears, and overlaps the main container.
If I scroll the page down, the navbar scrolls, and the menu moves up until it reaches the top. Then it stops and keeps at this place.
I managed to achieve it, more or less. But I still have a problem.
To illustrate my project in a simple way, I took some basic code I found on css-tricks.com website and just modified it a bit to show my problem.
Here is the code :
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra,
#wrapper {
display:flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
<br />
<div class="extra"></div>
Here, the 'extra' div is my navbar, the main container is the grey part, and the sticky element is the menu.
What I would like is that the main container (the grey part) is really using the full width and height, meaning that the text in it should appear at the top-left corner and be party overlapped by the sticky div.
How can I achieve that?

Answer 1

I have used z-index for overlapping content:
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
z-index: 2;
}
.extra,
#wrapper {
width: 75%;
margin: auto;
background-color: #ccc;
z-index:1;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#brol{
margin-top: -100px;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}

Answer 2

// added .sticky-parent
.sticky-parent {
width: 0;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra, #wrapper {
display: flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper {
height: 2000px;
}
}
<div class="sticky-parent">
<div id="sticky">
sticky
</div>
</div>
<div id="brol">
This part should be overlapped by the sticky element
</div>

Answer 3

You can achieve this behavior by wrapping the sticky div inside a absolute positioned one. this will make the rest use the full available space.
Don't forget to add position:relative to it's parent, in your simplified case #wrapper to make sure it wont take the full width & height of the document or first relative parent it finds
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.extra,
#wrapper {
position: relative;
display:flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="mask">
<div id="sticky">
sticky
</div>
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
<br />
<div class="extra"></div>