Наглядное изменение приоритета с помощью CSS. Суть такая. Серый блок перекрывает оранжевый. Ситуация меняется при наведении. Поскольку у оранжевого блока меняется приоритет.
До наведения
После
Код
<style>
:root {
--bottom: orange;
--top: gray;
}
.center {
margin: 100px auto;
}
div {
position: relative;
width: 320px;
height: 320px;
}
.orange { background: var(--bottom); top: 280px; left: 50px; z-index: 0; }
.gray { background: var(--top); z-index: 1; }
.orange:hover { z-index: 50; }
</style>
<div class="center">
<div class="orange"> </div>
<div class="gray"> </div>
</div>
Изначально приоритет выше у серого блока " gray-1, orange - 0. При наведении курсора на оранжевый прямоугольник, у того меняется значение с 0 на 50. За счет этого происходят изменения на веб странице.
