2

Почему серый квадрат не закрывает черного?

#box {
  z-index: 1; // <-- если убрать то всё заработает
  margin: 50px;
  background: #ccc;
  width: 200px;
  height: 100px;
  position: absolute;
  border-radius: 5px;
  margin-top: 30px;
}

#box::before, #box::after {
  display: block;
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: -10px;
  left: 80px;
  transform: rotate(45deg);
  background: #333;
}

#box::before {
  z-index: -1;
}

#box::after {
  z-index: -1;
}
<div id="box"></div>

4
  • 1
    потому что before и after - считай что дочерние элементы и если родительскому элементу задавать z-index, то они будут отображаться поверх даже с отрицательным z-index
    – yolosora
    9 мар 2018 в 19:41
  • @yolosora выходит что его никак нельзя туда спрятать?
    – Cristian
    9 мар 2018 в 19:43
  • @Cristian ну вы сами в вопросе написали что нужно сделать чтобы спрятать)
    – yolosora
    9 мар 2018 в 19:44
  • @yolosora знаю, просто в моем проекте если не поставить z-index выше нуля то его закрывают другие объекты
    – Cristian
    9 мар 2018 в 19:47

2 ответа 2

2

   .wrap{
       position: absolute;
       z-index: 1;
    }
    #box {
   
      margin: 50px;
      background: #ccc;
      width: 200px;
      height: 100px;
      position: absolute;
      border-radius: 5px;
      margin-top: 30px;
    }

    #box::before, #box::after {
      display: block;
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      top: -10px;
      left: 80px;
      transform: rotate(45deg);
      background: #333;
    }

    #box::before {
      z-index: -1;
    }

    #box::after {
      z-index: -1;
    }
<div class="wrap">
    <div id="box"></div>
</div>

0

В вашем примере у псевдоэлементов :before и :after не работает z-index потому, что у их родителя определен свой z-index равный 1, который по приоритету стоит выше. И зачем вам 2 псевдоэлемента с одинаковыми стилями?

Ваш ответ

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

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