Контекст наложения (stacking context)

Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.

« CSS « Understanding CSS z-index

Контекст наложения

В предыдущем примере Добавляем z-index, порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( stacking context ).

Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий:

  • является корневым элементом (HTML),
  • позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto",
  • flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex|inline-flex,
  • элементы с opacity меньше чем 1. (См. the specification for opacity),
  • элементы с transform отличным от "none",
  • элементы с mix-blend-mode значением отличным от "normal",
  • элементы с filter значением отличным от "none",
  • элементы с isolation установленным в "isolate",
  • position: fixed
  • если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения (См. this post)
  • элементы с -webkit-overflow-scrolling установленным в "touch"

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

Суммируем:

  • Позиционирование и присваивание HTML-элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).
  • Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения.
  • Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.

Примечание: Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.

Пример

Example of stacking rules modified using z-index

В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:

  • Root

    • DIV #1

    • DIV #2

    • DIV #3

      • DIV #4
      • DIV #5
      • DIV #6

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.

Example Source Code

html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>
      Understanding CSS z-index: The Stacking Context: Example Source
    </title>

    <style type="text/css">
      * {
        margin: 0;
      }
      html {
        padding: 20px;
        font:
          12px/20px Arial,
          sans-serif;
      }
      div {
        opacity: 0.7;
        position: relative;
      }
      h1 {
        font: inherit;
        font-weight: bold;
      }
      #div1,
      #div2 {
        border: 1px dashed #696;
        padding: 10px;
        background-color: #cfc;
      }
      #div1 {
        z-index: 5;
        margin-bottom: 190px;
      }
      #div2 {
        z-index: 2;
      }
      #div3 {
        z-index: 4;
        opacity: 1;
        position: absolute;
        top: 40px;
        left: 180px;
        width: 330px;
        border: 1px dashed #900;
        background-color: #fdd;
        padding: 40px 20px 20px;
      }
      #div4,
      #div5 {
        border: 1px dashed #996;
        background-color: #ffc;
      }
      #div4 {
        z-index: 6;
        margin-bottom: 15px;
        padding: 25px 10px 5px;
      }
      #div5 {
        z-index: 1;
        margin-top: 15px;
        padding: 5px 10px;
      }
      #div6 {
        z-index: 3;
        position: absolute;
        top: 20px;
        left: 180px;
        width: 150px;
        height: 125px;
        border: 1px dashed #009;
        padding-top: 125px;
        background-color: #ddf;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      <h1>Division Element #1</h1>
      <code
        >position: relative;<br />
        z-index: 5;</code
      >
    </div>

    <div id="div2">
      <h1>Division Element #2</h1>
      <code
        >position: relative;<br />
        z-index: 2;</code
      >
    </div>

    <div id="div3">
      <div id="div4">
        <h1>Division Element #4</h1>
        <code
          >position: relative;<br />
          z-index: 6;</code
        >
      </div>

      <h1>Division Element #3</h1>
      <code
        >position: absolute;<br />
        z-index: 4;</code
      >

      <div id="div5">
        <h1>Division Element #5</h1>
        <code
          >position: relative;<br />
          z-index: 1;</code
        >
      </div>

      <div id="div6">
        <h1>Division Element #6</h1>
        <code
          >position: absolute;<br />
          z-index: 3;</code
        >
      </div>
    </div>
  </body>
</html>

Division Element #1

css
position: relative;
z-index: 5;

Division Element #2

css
position: relative;
z-index: 2;

Division Element #3

css
position: absolute;
z-index: 4;

Division Element #4

css
position: relative;
z-index: 6;

Division Element #5

css
position: relative;
z-index: 1;

Division Element #6

css
position: absolute;
z-index: 3;

Смотрите также