Полупрозрачная кнопка, не скрытая липким элементом [дубликат] ⇐ CSS

[Anonymous]

У меня есть страница с несколькими кнопками, некоторые из которых отображаются с непрозрачностью менее 1. На этой странице также есть прикрепленный элемент div.
При прокрутке страницы кнопки с непрозрачностью 1 корректно скрываются липким элементом div, а кнопки с непрозрачностью менее 1 по-прежнему отображаются поверх прикрепленного элемента div. Я пробовал то же самое с другими элементами, кроме кнопок, и кажется, что как только элемент имеет непрозрачность меньше 1, он всегда виден поверх прикрепленного элемента div.
Я могу воспроизвести его как в Firefox, так и в Edge. Это нормальное поведение?
Следующий код воспроизводит его (запустите фрагмент, а затем прокрутите вниз в окне результатов):

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

.Blocker
{
top: 0;
left: 0;
background-color: blue;
position: sticky;
}

input[type="button"]
{
background-color: #ffffff;
border: 1px solid #000000;
color: #000000;
padding: 10px;
}

input[type="button"]:disabled
{
opacity: 0.5;
}

div
{
width: 100%;
height: 150px;
}

.Opaque
{
background-color: green;
}

.SemiTransparent
{
background-color: red;
opacity: 0.5;
}

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... ky-element