From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/z-index/index.html | 150 ++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/de/web/css/z-index/index.html (limited to 'files/de/web/css/z-index') diff --git a/files/de/web/css/z-index/index.html b/files/de/web/css/z-index/index.html new file mode 100644 index 0000000000..014b0c53c8 --- /dev/null +++ b/files/de/web/css/z-index/index.html @@ -0,0 +1,150 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Referenz +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +
+

Die CSS-Eigenschaft z-index legt die z-Reihenfolge eines positionierten Elements und seiner Abkömmlinge oder Flex-Elemente fest. Überlappende Elemente mit einem größeren z-index überdecken diejenigen mit einem kleineren.

+ +
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+ + + +

Für einen positionierte Box (d.h. eine mit einer position anders als static) ist für die Eigenschaft z-index spezifiert:

+ +

For a positioned box (that is, one with any position other than static), the z-index property specifies:

+ +
    +
  1. Die Stapelebene der Box im aktuellen Stapel-Zusammenhang.
    2. +
  2. Ob die Box einen lokalen Stapel-Zusammenhang herstellt.
    3. +
+
+ +

Syntax

+ +
/* Schlüsselwortwert */
+z-index: auto;
+
+/* <integer> Werte */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Negative Werte, um die Priorität zu senken */
+
+/* Globale Werte*/
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

Werte

+ +
+
auto
+
Die Box etabliert keinen neuen lokalen Stapelkontext. Die generierte Box befindet sich im aktuellen Stapelkontext auf gleicher Ebene wie dessen Elternbox. 
+
<integer>
+
Der {{cssxref("integer")}} legt die Stapelebene des momentanen Stapelkontexts fest. Die Box etabliert zudem einen neuen Stapelkontext, dessen Stapelebene 0 ist. Dadurch werden die z-Indizes von Kinder-Elementen nicht mit z-Indizes außerhalb des Elements verglichen.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Visuelle Schichtenelement

+ +

HTML

+ +
<div class="wrapper">
+  <div class="dashed-box">Dashed box</div>
+  <div class="gold-box">Gold box</div>
+  <div class="green-box">Green box</div>
+</div>
+
+ +

CSS

+ +
.wrapper {
+  position: relative;
+}
+
+.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Definiert z-index als animierbar.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.properties.z-index")}}

+ +

Siehe auch

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