Я пытаюсь понять, как работает z-index. Чтобы сделать это, я создал простой пример, состоящий из пяти делений. Каждый из них - дитя предыдущего, кроме первого. Моя цель - сделать так, чтобы первый div, родительский контейнер всех других div, отображался поверх всех остальных, эффективно скрывая их.

Чтобы достичь своей цели, я наложил свойства z-index на все div и на родительский div. Я добавил преувеличенное значение 100, чтобы убедиться, что оно выше, чем все остальные, но, похоже, оно не работает. ,

Я прочитал много разных документов, касающихся z-index, и прочитал множество ответов здесь, в Переполнении стека. До сих пор я пробовал следующее:

Добавление свойств позиции ко всем элементам div.Добавление непрозрачности со значением 0,99 к элементам div, которые я хочу скрыть.Применение различных комбинаций значений атрибута позиции (например, относительное, фиксированное, абсолютное).

Тем не менее, я не добился успеха в том, чтобы родительский div появился поверх всех остальных div. Что я делаю неправильно?

Я создал JSFiddle с примером, который я только что описал:https://jsfiddle.net/y8jfdz7w/15/.

.first {
  position: absolute;
  z-index: 100;
  width: 500px;
  height: 500px;
  background-color: grey;
}
.second {
  position: absolute;
  z-index: 2;
  width: 450px;
  height: 450px;
  top: 25px;
  left: 25px;
  background-color: orange;
  opacity: 0.99;
}
.third {
  position: absolute;
  z-index: 3;
  width: 400px;
  height: 400px;
  top: 25px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}

<div class="first">
  <div class="second">
    <div class="third">
      <div class="fourth">
        <div class="fifth">
        </div>
      </div>
    </div>
  </div>
</div>