Position absolute + z-index относительно родителя

@rodigy · Регистрация: 24.10.2015

Author24 — интернет-сервис помощи студентам

Не работает z-index у абсолютно позиционированных детей для родителя с позиционированием relative/absolute. Так и должно быть по спецификации или я что не так делаю?
пример

CSS

.fon {
  background: orange;
  width: 500px;
  height: 500px;
}
.card {
  position: relative;
  left: 25px;
  top: 10px;
  width: 200px;
  height: 250px;
  background: grey;
  z-index: 3
}
 
.card-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 2;
}
.slide-title {
  transform: rotate(-90deg);
  transform-origin: 0% 100%;
    position: absolute;
  top: 110px;
    left: 0;
    width: 110px;
  color: #fff;
  text-align: center;
  background: black;
}

HTML5

<div class="fon">
  <div class="card">
    card
    <div class="card-slide">
      <div class="slide-title">+</div>
    </div>
  </div>
</div>

@monochromer · 12.07.2017, 23:02

Текстовый узел "card" и элемент .card-slide находятся на одном уровне вложенности. Поместите текстовый узел в отдельный элемент с позиционированием и большим z-index, чем у .card-slide.

@rodigy · 12.07.2017, 23:12 **[ТС]**

monochromer, спасибо за решение, так же интересует технически почему так происходит

@monochromer · 13.07.2017, 08:39

rodigy,
https://habrahabr.ru/post/166435/
http://iantonov.me/page/kontek... -s-z-index

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	12.07.2017, 23:02	2
	Текстовый узел "card" и элемент .card-slide находятся на одном уровне вложенности. Поместите текстовый узел в отдельный элемент с позиционированием и большим z-index, чем у .card-slide. 1

@rodigy 90 / 40 / 17 Регистрация: 24.10.2015 Сообщений: 574
	12.07.2017, 23:12 [ТС]	3
	monochromer, спасибо за решение, так же интересует технически почему так происходит 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	13.07.2017, 08:39	4
	rodigy, https://habrahabr.ru/post/166435/ http://iantonov.me/page/kontek... -s-z-index 0

Опции темы