Reputation: 11
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>
Upvotes: 1
Views: 2912
Reputation: 273561
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:
- All positioned, opacity or transform descendants, in tree order that fall into the following categories:
- 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.
Upvotes: 3