Как установить фиксированный элемент, помещенный в липкий, выше относительного ⇐ CSS

[Anonymous]

Я помещаю фиксированный элемент на другой липкий элемент и хочу, чтобы он закрывал все остальные элементы на странице. Это выглядит очевидным, но...
Лучше посмотрите на codepen.
Я думаю, это ненормальное поведение.

Проверено в Chrome — просто очень странно.
Проверено в Firefox — сбои при отрисовке (попробуйте нажать на необработанную черную область)

Это четкое воспроизведение ошибки, и мне действительно нужен фиксированный элемент в прикрепленном файле. элемент, который покрывает, расположен рядом с ним относительного элемента.

Кто-нибудь может помочь?

Посмотрите на код — я попробую чтобы поиграть с z-index, результат выше липкий, а после него совсем другой.
"z-index:-1;" Похоже, хак близок к успеху, но у меня на странице много других элементов с положительным z-индексом.

Посмотрите здесь, моя ручка, где я ее тестировал

Код: Выделить всё

/* 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%;

}

Код: Выделить всё

am i bug ?

z-index:0;

i am sticky

i am fixed in sticky

z-index:1;



am i bug ?

z-index:0;

Подробнее здесь: https://stackoverflow.com/questions/566 ... n-relative