3

Ребята, возник вопрос, который ввел меня в легкий ступор:

В 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>

2 ответа 2

4

Два способа добиться нужного результата:

1. Убрать z-index у .card и задать отрицательный псевдоэлементам:

.card {
  display: inline-block;
  width: 250px;
  height: 100px;
  background: #333;
  border-radius: 10px;
  margin-left: 50px;
  margin-top: 20px;
  position: relative;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  background: #f30000;
  border-radius: 10px;
  box-shadow: 0 0 11px #f30000;
  z-index: -1;
}

.card::before {
  width: 85px;
  height: 85px;
  left: -20px;
  top: -10px;
}

.card::after {
  width: 70px;
  height: 70px;
  right: -10px;
  bottom: -20px;
}
<div class="card"></div>

2. Убрать z-index в принципе и воспользоваться 3d-трансформацией:

.card {
  display: inline-block;
  width: 250px;
  height: 100px;
  background: #333;
  border-radius: 10px;
  margin-left: 50px;
  margin-top: 20px;
  position: relative;
  transform-style: preserve-3d;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  background: #f30000;
  border-radius: 10px;
  box-shadow: 0 0 11px #f30000;
  transform: translateZ(-1px);
}

.card::before {
  width: 85px;
  height: 85px;
  left: -20px;
  top: -10px;
}

.card::after {
  width: 70px;
  height: 70px;
  right: -10px;
  bottom: -20px;
}
<div class="card"></div>

1
  • Огромнейшее Вам спасибо! Воспользовался Вашей идеей с 3D-трансформацией - всё получилось. Респект за идею - я бы не догадался))
    – Stark
    Commented 16 сент. 2023 в 19:15
3

При наличии позиционирования отличного от static (по умолчанию) - дочерние элементы не могут быть ниже родителя по оси Z. Из выходов, если нельзя убрать position: relative, создать дочерний элемент с нужным фоном и содержимым и уже его располагать относительно псевдоэлементов.

.card {
  display: inline-block;
  margin-left: 50px;
  margin-top: 20px;
  position: relative;
}

span {
  display: block;
  position: relative;
  width: 250px;
  height: 100px;
  background: #333;
  border-radius: 10px;
  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"><span><span></div>
</body>

1
  • Огромное спасибо Вам за помощь и информацию!) Я не знал об этой особенности дочерних элементов, если у родителя не static
    – Stark
    Commented 16 сент. 2023 в 19:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.