dump 2020-12-11

5 files changed, 738 insertions, 0 deletions

diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
new file mode 100644
index 0000000000..40e655caef
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
@@ -0,0 +1,152 @@
+---
+title: Stapeln mit fließenden Blöcken
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+tags:
+  - CSS
+  - CSS z-index
+  - CSS z-index verstehen
+  - Fortgeschritten
+  - Leitfaden
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<div>{{cssref}}</div>
+
+<p>Bei fließenden Blöcken (<a href="/de/docs/Web/CSS/float"><code>float</code></a>) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:</p>
+
+<ol>
+ <li>Der Hintergrund und die Ränder des Wurzelelements</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li>
+ <li>Fließende Blöcke</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei</li>
+</ol>
+
+<p>Wie Sie im Beispiel unten sehen können, sind Hintergrund und Rahmen des nicht positionierten Blocks (DIV #4) von fließenden Blöcken völlig unbeeinflusst, der Inhalt ist jedoch betroffen. Dies geschieht gemäß dem Standard-Float-Verhalten. Dieses Verhalten kann mit einer zusätzlichen Regel in der obigen Liste dargestellt werden:</p>
+
+<ol>
+ <li>Der Hintergrund und die Ränder des Wurzelelements</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li>
+ <li>Schwebende Blöcke</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">nicht-positionierte</a> Inline-Elemente</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position#Types_of_positioning">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML</li>
+</ol>
+
+<p><img alt="Example of stacking rules with floating boxes" class="internal" src="/@api/deki/files/911/=Understanding_zindex_02.png"></p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn ein Deckkraftwert (<code><a href="/de/docs/Web/CSS/opacity">opacity</a></code>) auf den nicht positionierten Block (DIV #4) angewendet wird, passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks ragen über die schwebenden Blöcke und die positionierten Blöcke hinaus. Das liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines Deckkraftwerts erzeugt einen neuen Stapelkontext (siehe <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a>).</p>
+</div>
+
+<h2 id="Quellcode_für_das_Beispiel">Quellcode für das Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="flo1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;float: left;&lt;/div&gt;
+
+&lt;div id="flo2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;float: right;&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;no positioning&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #6&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 80px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+
+#rel1 {
+  position: relative;
+  border: 1px dashed #996;
+  background-color: #cff;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn <code>z-index</code> nicht verwendet wird.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Stapeln mit z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2>
+
+<ul>
+ <li>Autor(s): Paolo Lombardi</li>
+ <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it" rel="noopener">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external external-icon" href="http://creativecommons.org/licenses/by-sa/2.0/" rel="noopener">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li>
+ <li>Letzte Aktualisation: 3. November 2004</li>
+</ul>
+</div>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..b1a48f0ebc
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,132 @@
+---
+title: Stapelkontext Beispiel 1
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<div>{{cssref}}</div>
+
+<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h2 id="Stapelkontext_Beispiel_1">Stapelkontext Beispiel 1</h2>
+
+<p>Lassen Sie uns mit einem einfachen Beispiel beginnen. Im Wurzel-Stapelkontext haben wir zwei DIVs (DIV #1 und DIV #3), beide relativ positioniert, aber ohne {{cssxref("z-index")}} Eigenschaften. Innerhalb von DIV #1 befindet sich ein absolut positioniertes DIV #2, während sich in DIV #3 ein absolut positioniertes DIV #4 befindet, beide ohne <code>z-index</code> Eigenschaften.</p>
+
+<p>Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p>Wenn DIV #2 ein positiver <code>z-index</code> Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p>Wenn dann DIV #4 ebenfalls einen positiven <code>z-index</code> zugewiesen bekommt, der größer ist als der <code>z-index</code> von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.</p>
+
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p>In diesem letzten Beispiel können Sie sehen, dass DIV #2 und DIV #4 keine Geschwister sind, da sie zu verschiedenen Eltern in der Hierarchie der HTML-Elemente gehören. Trotzdem kann die Stapelung von DIV #4 in Bezug auf DIV #2 durch <code>z-index</code> gesteuert werden. Da DIV #1 und DIV #3 kein z-index-Wert zugewiesen ist, bilden sie keinen Stapelkontext. Das bedeutet, dass ihr gesamter Inhalt, einschließlich DIV #2 und DIV #4, zu demselben Wurzel-Stacking-Kontext gehört.</p>
+
+<p>In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:</p>
+
+<ul>
+ <li>Wurzel-Stapelkontext
+  <ul>
+   <li>DIV #2 (z-index 1)</li>
+   <li>DIV #4 (z-index 2)</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> DIV #1 und DIV #3 sind nicht lichtdurchlässig. Es ist wichtig, sich daran zu erinnern, dass das Zuweisen einer Deckkraft von weniger als 1 zu einem positionierten Element implizit einen Stapelkontext erzeugt, genau wie das Hinzufügen eines <code>z-index</code> Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.</div>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="div1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div3"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div4"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 2;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2>
+
+<ul>
+ <li>Autor(s): Paolo Lombardi</li>
+ <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li>
+ <li>Letzte Aktualisation: 9. Juli 2005</li>
+</ul>
+</div>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
new file mode 100644
index 0000000000..bff33304e9
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
@@ -0,0 +1,140 @@
+---
+title: Stapelkontext Beispiel 2
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<div>{{cssref}}</div>
+
+<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h2 id="Stapelkontext_Beispiel_2">Stapelkontext Beispiel 2</h2>
+
+<p>Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des <em>Stapelkontexts</em>. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '352', '270') }}</p>
+
+<p>Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) liegt, da beide zum selben Stapelkontext gehören (dem Wurzel-Kontext), so dass die <code>z-index</code> Werte bestimmen, wie Elemente gestapelt werden.</p>
+
+<p>Was als merkwürdig angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrer z-index Werte. Der Grund dafür ist, dass sie nicht zum selben Stapelkontext gehören. DIV #4 gehört zu dem Stacking-Kontext, der durch DIV #3 erzeugt wurde, und wie bereits erklärt, befindet sich DIV #3 (und sein gesamter Inhalt) unter DIV #2.</p>
+
+<p>Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:</p>
+
+<ul>
+ <li>Wurzel-Stapelkontext
+  <ul>
+   <li>DIV #2 (z-index 2)</li>
+   <li>DIV #3 (z-index 1)
+    <ul>
+     <li>DIV #4 (z-index 10)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Es ist zu beachten, dass sich die HTML-Hierarchie im Allgemeinen von der Stapelkontexthierarchie unterscheidet. In der Stapelkontexthierarchie werden Elemente, die keinen Stapelkontext erzeugen, an ihrem übergeordneten Element zusammengeklappt.</div>
+
+<h2 id="Example_source_code" name="Example_source_code">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div1"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #1&lt;/span&gt;&lt;br /&gt;
+        position: relative;
+        &lt;div id="div2"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #2&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 2;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div3"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #3&lt;/span&gt;&lt;br /&gt;
+        position: relative;&lt;br /&gt;
+        z-index: 1;
+        &lt;div id="div4"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #4&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 10;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende Elemente beim Stapeln behandelt werden.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2>
+
+<ul>
+ <li>Autor(s): Paolo Lombardi</li>
+ <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li>
+ <li>Letzte Aktualisation: 9. July 2005</li>
+</ul>
+</div>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
new file mode 100644
index 0000000000..165cd88bd6
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
@@ -0,0 +1,186 @@
+---
+title: Stapelkontext  Beispiel 3
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<div>{{cssref}}</div>
+
+<p>« <a href="/en-US/docs/Web/CSS">CSS</a> « <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>
+
+<h2 id="Stapelkontext_Beispiel_3">Stapelkontext Beispiel 3</h2>
+
+<p>Dieses letzte Beispiel zeigt Probleme, die entstehen, wenn mehrere positionierte Elemente in einer mehrstufigen HTML-Hierarchie gemischt werden und wenn z-Indizes über Klassenselektoren zugewiesen werden.</p>
+
+<p>Nehmen wir als Beispiel ein hierarchisches Menü mit drei Ebenen, das aus mehreren positionierten DIVs besteht. Die DIVs der zweiten und dritten Ebene erscheinen, wenn man mit dem Mauszeiger über die übergeordneten Elemente fährt oder auf sie klickt. Normalerweise wird diese Art von Menü entweder clientseitig oder serverseitig per Skript generiert, so dass die Stilregeln mit einem Klassenselektor anstelle des id-Selektors zugewiesen werden.If the three menu levels partially overlap, then managing stacking could become a problem.</p>
+
+<p>Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '320', '330') }}</p>
+
+<p>Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.</p>
+
+<p>Das Menü der zweiten Ebene wird absolut innerhalb des übergeordneten Elements positioniert. Um es über alle Menüs der ersten Ebene zu legen, wird ein <code>{{cssxref("z-index")}}</code> verwendet. Das Problem ist, dass für jedes Menü der zweiten Ebene ein Stapelkontext erzeugt wird und jedes Menü der dritten Ebene zum Kontext seines Elternelements gehört.</p>
+
+<p>Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben <code>z-index</code> Wert haben und die Standard-Stapelregeln gelten.</p>
+
+<p>Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:</p>
+
+<ul>
+ <li>Wurzel-Stapelkontext
+  <ul>
+   <li>LEVEL #1
+    <ul>
+     <li>LEVEL #2 (z-index: 1)
+      <ul>
+       <li>LEVEL #3</li>
+       <li>...</li>
+       <li>LEVEL #3</li>
+      </ul>
+     </li>
+     <li>LEVEL #2 (z-index: 1)</li>
+     <li>...</li>
+     <li>LEVEL #2 (z-index: 1)</li>
+    </ul>
+   </li>
+   <li>LEVEL #1</li>
+   <li>...</li>
+   <li>LEVEL #1</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) <code>z-index</code> Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.</p>
+
+<div class="note"><strong>Hinweis:</strong> Im Quellcode sehen Sie, dass die Menüs der zweiten und dritten Ebene aus mehreren DIVs bestehen, die in einem absolut positionierten Container enthalten sind. Dies ist nützlich, um sie alle auf einmal zu gruppieren und zu positionieren.</div>
+
+<h2 id="Example_source_code" name="Example_source_code">Beispiel Quellcode</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+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;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+
+   &lt;div id="container1"&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+
+         &lt;div id="container2"&gt;
+
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+
+         &lt;/div&gt;
+
+      &lt;/div&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+      &lt;/div&gt;
+
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapeln ohne die Eigenschaft z-index</a>: Die Stapelungsregeln, die gelten, wenn der <code>z-index</code> nicht verwendet wird.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken</a>: Wie fließende Elemente (<code>float</code>) beim Stapeln behandelt werden.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2>
+
+<ul>
+ <li>Autor(s): Paolo Lombardi</li>
+ <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li>
+ <li>Letzte Aktualisation: 9. Juli 2005</li>
+</ul>
+</div>
+
+<p><strong>Hinweis:</strong> Der Grund, warum das Beispielbild falsch aussieht - mit der zweiten Ebene 2, die die Menüs der Ebene 3 überlagert - ist, dass die Ebene 2 Deckkraft hat, was einen neuen Stapelungskontext erzeugt. Im Grunde ist diese ganze Beispielseite falsch und irreführend.</p>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..4711fcdaef
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,128 @@
+---
+title: Stapeln ohne die Eigenschaft z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+tags:
+  - CSS
+  - CSS z-index
+  - CSS z-index verstehen
+  - Fortgeschritten
+  - Leitfaden
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<div>{{cssref}}</div>
+
+<p>Wenn die <a href="/de/docs/Web/CSS/">CSS</a>-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):</p>
+
+<ol>
+ <li>Der Hintergrund und die Ränder des Wurzelelements</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position">nicht positionierte</a> Blöcke, in der Reihenfolge ihres Erscheinens im HTML</li>
+ <li>Nachfolgende <a href="/de/docs/Web/CSS/position">positionierte</a> Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei</li>
+</ol>
+
+<p>Beachten Sie, dass die CSS-Eigenschaft {{cssxref("order")}}, wenn sie das Rendering von der "Reihenfolge des Erscheinens im HTML" innerhalb von {{cssxref("flex")}}-Containern ändert, auch die Reihenfolge für den Stapelkontext beeinflusst.</p>
+
+<p>Im folgenden Beispiel sind die Elemente #1 bis #4 positionierte Elemente. Element Nr. 5 ist statisch und wird daher unter den anderen vier Elementen gezeichnet, obwohl es im HTML-Markup später kommt.</p>
+
+<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p>
+
+<h2 id="Quellcode_für_das_Beispiel">Quellcode für das Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="abs1" class="absolute"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="rel1" class="relative"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="rel2" class="relative"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="abs2" class="absolute"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="sta1" class="static"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: static;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapeln mit fließenden Blöcken:</a> Wie fließende (<code>float</code>) Elemente beim Stapeln behandelt werden.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Verwenden von z-index</a>: Wie Sie <code>z-index</code> verwenden, um die Standardstapelung zu ändern.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Der Stapelkontext:</a> Hinweise zum Stapelkontext.</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelkontext-Beispiel 1</a>: 2-stufige HTML-Hierarchie, <code>z-index</code> auf der letzten Stufe</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelkontext-Beispiel 2:</a> 2-stufige HTML-Hierarchie, <code>z-index</code> auf allen Ebenen</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelkontext-Beispiel 3:</a> 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Dokumenteninformation</h2>
+
+<ul>
+ <li>Autor(s): Paolo Lombardi</li>
+ <li>Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für <a class="external external-icon" href="http://www.yappy.it">YappY</a>. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> zu teilen.</li>
+ <li>Letzte Aktualisation: 3. November 2004</li>
+</ul>
+</div>