HTML / CSS - Create a sticky overlay-CodePudding

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 :

HTML

<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>

and CSS :

#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;
  }
}

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.

I cannot find a way to achieve that.

Would anybody help me, please ?

Thank you in advance.

Regards,

CodePudding user response：

<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>

#mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
#wrapper {
        position: relative;
    }

CodePudding user response：

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;
  }
}

CodePudding user response：

// 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>