3

Есть код

h2 {
  text-transform: uppercase;
  color: #fff;
  background: #F00;
  text-align: center;
  width: 120%;
  position: absolute;
  left: -5px;
  top: 59px;
  transform: rotate(35deg);
}

h2:after {
  background: #D10A0A;
  content: '';
  position: absolute;
  transform: rotate(150deg);
  width: 20px;
  height: 40px;
  left: 90%;
  z-index: -1;
}
<h2 class="action">Хит продаж</h2>

Не понимаю, почему псевдоэлемент при любом значении z-index получается по слоям выше, чем сам элемент. Получается вот такая ерунда, как на фотографии:

скриншот

2
  • 1. А как вам бы хотелось? 2. B заголовке вопроса идёт речь про before, а в коде про after, почему? 26 дек 2016 в 9:38
  • @VadimOvchinnikov поправил вопрос
    – Sergalas
    26 дек 2016 в 9:47

2 ответа 2

1

Псевдоэлемент h2:after создаётся внутри элемента h2 и поэтому не может оказаться под ним.

Попробуйте добавить внутрь ещё один элемент, который будет перекрывать ваш h2:after. Например, так:

h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  width: 120%;
  position: absolute;
  left: -5px;
  top: 59px;
  transform: rotate(35deg);
}

h2:after {
  background: #D10A0A;
  content: '';
  position: absolute;
  transform: rotate(150deg);
  width: 20px;
  height: 40px;
  left: 90%;
  top: 0;
  z-index: -1;
}

h2 span {
  display: block;
  position: relative;
  background: #F00;
}
<h2><span>Хит продаж</span></h2>

https://jsfiddle.net/L8cxwun5/

1

Z-index and transform

h2 {
  text-transform: uppercase;
  color: #fff;
  background: #F00;
  text-align: center;
  width: 50%;
  position: absolute;
  left: -5px;
  top: 59px;  
  transform: rotate(35deg);  
  transform-style: preserve-3d;
  -ms-transform: none;  
  -ms-transform-style: none;
}

h2:after {
  background: #D10A0A;
  content: '';
  position: absolute;  
  transform: rotate(150deg) translateZ(-20px);
  -ms-transform: rotate(150deg) translateZ(-20px);
  width: 20px;
  height: 40px;
  left: 90%;
  z-index: -1;
}
<h2 class="action">Хит продаж</h2>

2

Ваш ответ

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

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