Есть прямоугольник:
<div class="i">Hi world!</div>
Его стили:
.i{
height: 100px;
width: 300px;
text-align: center;
font-size: 16px;
background-color: #eee;
color: #fff;
position: relative;
z-index: 1;
}
И его оверлей:
.i::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333;
opacity: 0.5;
}
Ожидалось, что z-index: 1;
перекроет оверлей, и текст будет белым, но на деле так не происходит.
Почему, и как вылечить ?