Пример стекирования контекста 3

Описание

Этот последний пример демонстрирует проблемы, возникающие при смешивании нескольких позиционированных элементов в многоуровневой HTML-иерархии и при назначении значений z-index с помощью селекторов классов.

Рассмотрим в качестве примера трехъярусное иерархическое меню, созданное из нескольких позиционированных div элементов. Элементы второго и третьего уровней div появляются при наведении курсора или клике на их родительские элементы. Обычно такое меню генерируется скриптом, либо на стороне клиента, либо на стороне сервера, поэтому правила стилей назначаются с помощью селектора класса вместо селектора id.

Если три уровня меню частично перекрываются, то управление стекированием может стать проблемой.

Меню первого уровня позиционируется только относительно, поэтому контекст стекирования не создается.

Меню второго уровня абсолютно позиционируется внутри родительского элемента. Для того, чтобы оно расположилось над всеми меню первого уровня, используется свойство z-index. Проблема в том, что для каждого меню второго уровня создается контекст стекирования, и каждое меню третьего уровня принадлежит контексту своего родителя.

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

Чтобы лучше понять ситуацию, вот иерархия контекста стекирования (три точки "..." представляют многократное повторение предыдущей строки):

Корневой контекст стекирования
- УРОВЕНЬ #1
  - УРОВЕНЬ #2 (z-index: 1)
    - УРОВЕНЬ #3
    - …
    - УРОВЕНЬ #3
  - УРОВЕНЬ #2 (z-index: 1)
  - …
  - УРОВЕНЬ #2 (z-index: 1)
- УРОВЕНЬ #1
- …
- УРОВЕНЬ #1

Эту проблему можно избежать, устранив перекрытие разных уровней меню, или используя индивидуальные (и разные) значения z-индекса, заданные с помощью селектора id вместо селектора класса, или сглаживая HTML-иерархию.

Примечание: В исходном коде вы увидите, что меню второго и третьего уровня состоят из нескольких div элементов, содержащихся в абсолютно позиционируемом контейнере. Это полезно для группировки и позиционирования всех элементов одновременно.

Пример

HTML

<div class="lev1">
  <span class="bold">LEVEL #1</span>

  <div id="container1">
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;

      <div id="container2">
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
      </div>
    </div>

    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
  </div>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

CSS

div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

div.lev1 {
  width: 250px;
  height: 70px;
  position: relative;
  border: 2px outset #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#container1 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 75px;
}

div.lev2 {
  opacity: 0.9;
  width: 200px;
  height: 60px;
  position: relative;
  border: 2px outset #990000;
  background-color: #ffdddd;
  padding-left: 5px;
}

#container2 {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 110px;
}

div.lev3 {
  z-index: 10;
  width: 100px;
  position: relative;
  border: 2px outset #000099;
  background-color: #ddddff;
  padding-left: 5px;
}

Результат

См. также

Стек без свойства z-индекса: Правила стекирования, которые применяются, когда z-index не используется.
Стек плавающих элементов: Как обрабатываются плавающие элементы в стеке.
Использование z-индекса: Как использовать z-index для изменения стандартного стекирования.
Контекст стекирования: Примечания по контексту стекирования.
Пример контекста стекирования 1: Двухуровневая HTML-иерархия, z-index на последнем уровне
Пример контекста стекирования 2: Двухуровневая HTML-иерархия, z-index на всех уровнях

Примечание: Образец изображения выглядит неправильно - со вторым уровнем 2, перекрывающим уровни меню 3 - потому что уровень 2 имеет непрозрачность, что создает новый контекст стекирования. По сути, вся эта страница примера неверна и вводит в заблуждение.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3