Z-index не работает с относительными родительскими элементами и элементами после / до

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

.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

почему моего красного блока нет под текстом?

Ставьте минус, -22 или что-то в этом роде.

— 13.06.2018 14:52

z-index рассчитывается от ближайшего родительского элемента, расположенного внутри этого родителя. ваше значение z-index: 22 устанавливает псевдо сверху (на 22) внутри h3, а не от тела. z-index: 0 на псевдо-уровне находится на уровне h3 .. начиная с 24 ...

— 13.06.2018 14:53

@VXp - это хорошая практика устанавливать значения <0?

— 13.06.2018 14:54

@ brabertaser19 Если вы хотите, чтобы этот элемент был не кликабельным или просто презентационным, да!

— 13.06.2018 14:56

Конечно, ничего плохого в этом нет, дело не в хорошей практике, обычно в работе / не работе. :)

— 13.06.2018 14:57

@VXp, как только он заработает, вам стоит задуматься о том, хороший это код или плохой.

— 13.06.2018 15:05

html css z-index pseudo-element

13.06.2018 14:50

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте z-index: -1 перед элементом.

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

Хороший друг! :)

— 13.06.2018 14:55

Спасибо @PraveenKumar

— 13.06.2018 14:56

13.06.2018 14:53

Другие вопросы по теме

Странная логика медиа-запросов CSS

Переместить элемент вверх только с помощью CSS

Создайте подменю в раскрывающемся списке подменю с помощью CSS

Как сделать всплывающий элемент с фиксированной позицией под вторыми тегами <html> и <body>?

Использование django-bootstrap4 + django_icons + мои собственные файлы css

Не удалось разместить контент в раскрывающемся меню

Как создать "искажение" div с помощью CSS

Доступ к тегам с красивым супом и css

БЭМ правильное вложение, я не умею писать css / less

Прокрутка фона не работает

Z-index не работает с относительными родительскими элементами и элементами после / до

Ответы 1

Другие вопросы по теме

Похожие вопросы