Ребята, возник вопрос, который ввел меня в легкий ступор:
В HTML есть некий серый блок (<div class="card"></div>
). Ему задано позиционирование position: relative
и z-index: 5
, чтобы он был сверху. Также есть два красных блока, которые реализованы, как псевдоэлементы before
и after
- они спозиционированы абсолютно position: absolute
.
Нужно, чтобы оба псевдоэлемента были под серым блоком и для этого я задаю им свойство z-index меньше, чем у серого блока: z-index: 2
.
По моей логике, они должны спрятаться под него, но этого не происходит... Подскажите, пожалуйста, где я туплю? Спасибо!)
.card {
display: inline-block;
width: 250px;
height: 100px;
background: #333;
border-radius: 10px;
margin-left: 50px;
margin-top: 20px;
position: relative;
z-index: 5;
}
.card::before, .card::after {
content: "";
position: absolute;
background: #f30000;
border-radius: 10px;
box-shadow: 0 0 11px #f30000;
z-index: 2;
}
.card::before {
width: 85px;
height: 85px;
left: -20px;
top: -10px;
}
.card::after {
width: 70px;
height: 70px;
right: -10px;
bottom: -20px;
}
<body>
<div class="card"></div>
</body>