From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../the_stacking_context/index.html | 283 +++++++++++++++++++++ 1 file changed, 283 insertions(+) create mode 100644 files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (limited to 'files/ru/web/css/css_positioning/understanding_z_index') diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..8a76b44318 --- /dev/null +++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,283 @@ +--- +title: Контекст наложения (stacking context) +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +

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

+ +

« CSS « Understanding CSS z-index

+ +

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

+ +

 

+ +

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

+ +

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

+ + + +

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

+ +

Суммируем:

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

Пример

+ +

Example of stacking rules modified using z-index

+ +

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

+ + + +

Важно отметить, что 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.

+ +
+

Notes:

+ + +
+ +

Example Source Code

+ +
<?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

+ +
position: relative;
+z-index: 5;
+
+ +
+

Division Element #2

+ +
position: relative;
+z-index: 2;
+
+
+ +
+

Division Element #3

+ +
position: absolute;
+z-index: 4;
+
+
+ +
+

Division Element #4

+ +
position: relative;
+z-index: 6;
+
+
+ +
+

Division Element #5

+ +
position: relative;
+z-index: 1;
+
+
+ +
+

Division Element #6

+ +
position: absolute;
+z-index: 3;
+
+
+ +

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

+ + + +
+

Original Document Information

+ + +
-- cgit v1.2.3-54-g00ecf