1

I place fixed element to onaother sticky element and want it to cover any other elements on page. It looks obvious, but... Better look at codepen. I think this is not normal behavior.

Tested in chrome - just very strange. Tested in firefox - glitching in draw (try to click on undilplayed black area)

This is clear bug replay and i realy need fixed element in sticky element that cover placed next to it relative element.

Anyone can help?

Look to code - i try to play with z-index and result above sticky and after it is very different. "z-index:-1;" looks like hack near to success, but i have a lot of other elements on page that has positive z-index.

Look here my pen where i tested it

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>
Dmitry Bocharov
  • 11
  • 2

1 Answers1

1

You need to increase z-index of the sticky element

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

From the MDN page:

This value always creates a new stacking context.

So using z-index for the fixed element is useless because it belongs to the stacking context created by the sticky elemen and since bug elements are also positionned with z-index equal to 0 the tree order will decide about the painting order:

  1. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
    1. All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. ref

You can also decrease the z-index of the bug element but I don't recommend as you may face unwanted behavior where elements can be hidden behind:

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:-1;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

You can also simply remove positon:relative for bug elements:

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  z-index:1000; /* have no effect on non-postionned element*/
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

Related: Why can't an element with a z-index value cover its child?

If you cannot change z-index of the sticky element and you cannot remove position:relative from bug elements and you cannot decrease their z-index lower than 0 and you cannot change the HTML structure then you have no way to do this.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415