1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
---
title: CSS z-index verstehen
slug: Web/CSS/CSS_Positioning/Understanding_z_index
tags:
- Advanced
- CSS
- Guide
- NeedsTranslation
- Reference
- TopicStub
- Understanding_CSS_z-index
- z-index
translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
---
<div>{{cssref}}</div>
<p>In den meisten einfachen Fällen können <a href="/de/docs/Web/HTML">HTML</a>-Seiten als zweidimensional betrachtet werden, da Text, Bilder und andere Elemente auf der Seite angeordnet sind, ohne sich zu überlappen. In diesem Fall gibt es einen einzigen Rendering-Fluss, und der Prozess kennt den Platz, den jedes Elemente einimmt. Mit dem Attribut {{cssxref("z-index")}} können Sie die Reihenfolge der Schichtung von Objekten beim Rendern von Inhalten verändern.</p>
<blockquote>
<p>In CSS 2.1 hat jede Box eine Position in drei Dimensionen. Zusätzlich zu ihrer horizontalen und vertikalen Position liegen die Boxen entlang einer "Z-Achse" und werden übereinander formatiert. Die Positionen der Z-Achse sind besonders relevant, wenn sich Boxen visuell überlappen.</p>
</blockquote>
<p>(von <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
<p>Das bedeutet, dass Sie mit CSS-Stilregeln Boxen auf Ebenen zusätzlich zur normalen Rendering-Ebene (Ebene 0) positionieren können. Die Z-Position jeder Ebene wird als Ganzzahl ausgedrückt, die die Stapelreihenfolge für das Rendering darstellt. Größere Zahlen bedeuten näher am Betrachter. Die Z-Position kann mit der CSS-Eigenschaft <a href="/de/docs/Web/CSS/z-index"><code>z-index</code></a> gesteuert werden</p>
<p>Die Verwendung von <code>z-index</code> erscheint extrem einfach: eine einzelne Eigenschaft, der eine einzelne Ganzzahl zugewiesen ist, mit einem leicht verständlichen Verhalten. Wenn z-index jedoch auf komplexe Hierarchien von HTML-Elementen angewendet wird, kann sein Verhalten schwer zu verstehen oder vorherzusagen sein. Das liegt an den komplexen Stapelungsregeln. In der Tat wurde in der CSS-Spezifikation <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Anhang E</a> ein eigener Abschnitt reserviert, um diese Regeln besser zu erklären.</p>
<p>Dieser Artikel wird versuchen, diese Regeln zu erklären, mit einigen Vereinfachungen und mehreren Beispielen.</p>
<ol>
<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/Stacking_and_float">Stapeln mit schwebenden Blöcken</a>: Wie schwebende 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 S</a><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">tapelungskontext</a>: Hinweise zum Stacking-Kontext.</li>
<li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelungskontext-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">Sta</a><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">pelungsk</a><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">ontext-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">Sta</a><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">pelungsk</a><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">ontext-Beispiel 3</a>: 3-stufige HTML-Hierarchie, <code>z-index</code> auf der zweiten Ebene</li>
</ol>
<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>
<p><small><em>Anmerkung des Autors: Danke an Wladimir Palant und Rod Whiteley für die Rezension.</em></small></p>
</div>
|
