z-index не работает с относительными родителями и элементами after / before - PullRequest
Новая
       28

z-index не работает с относительными родителями и элементами after / before

0 голосов
/ 13 июня 2018

У меня есть такой код (прототип): 

.headerz {
  position: relative;
  padding: 5rem 0 0 5rem;
  margin: 3rem 0 0 0;
  color: #000;
  font-size: 3.8rem;
  text-transform: uppercase;
  z-index: 24;
}

.headerz::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 100px;
  left: 0;
  bottom: -3rem;
  background-color: red;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 22;
}

.headerz::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 66px;
  left: 8.5rem;
  top: -2.8rem;
  background-color: blue;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 22;
}
<h3 class="headerz">Contacts</h3>

https://codepen.io/anon/pen/LrLjqQ

почему мой красный блок не находится под текстом?

1 Ответ

0 голосов
/ 13 июня 2018

Добавьте z-index: -1 к элементу before. 

.footer-contacts-header-main {
position: relative;
padding: 5rem 0 0 5rem;
margin: 3rem 0 0 0;
color: #000;
font-size: 3.8rem;
text-transform: uppercase;
z-index: 24;
}

.footer-contacts-header-main::before {
content: "";
position: absolute;
width: 110px;
height: 100px;
left: 0;
bottom: -3rem;
background-color: red;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
}

.footer-contacts-header-main::after {
content: "";
position: absolute;
width: 72px;
height: 66px;
left: 8.5rem;
top: -2.8rem;
background-color: blue;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 22;
}
<h3 class="footer-contacts-header-main">Contacts</h3>
...