From ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 11 Dec 2020 19:00:14 -0500 Subject: dump 2020-12-11 --- .../stacking_and_float/index.html | 152 +++++++++++++++++ .../stacking_context_example_1/index.html | 132 +++++++++++++++ .../stacking_context_example_2/index.html | 140 ++++++++++++++++ .../stacking_context_example_3/index.html | 186 +++++++++++++++++++++ .../stacking_without_z-index/index.html | 128 ++++++++++++++ 5 files changed, 738 insertions(+) create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html (limited to 'files/de/web/css/css_positioning') 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 +--- +
{{cssref}}
+ +

Bei fließenden Blöcken (float) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Fließende Blöcke
    4. +
  4. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    5. +
+ +

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:

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Schwebende Blöcke
    4. +
  4. Nachfolgende nicht-positionierte Inline-Elemente
    5. +
  5. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML
    6. +
+ +

Example of stacking rules with floating boxes

+ +
+

Hinweis: Wenn ein Deckkraftwert (opacity) 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 What No One Told You About Z-Index).

+
+ +

Quellcode für das Beispiel

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+<div id="rel1">
+  <b>DIV #6</b><br />position: relative;</div>
+
+
+ +

CSS

+ +
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;
+}
+
+ +

See also

+ + + +
+

Original Dokumenteninformation

+ + +
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 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 1

+ +

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 z-index Eigenschaften.

+ +

Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.

+ +

Stacking context example 1

+ +

Wenn DIV #2 ein positiver z-index Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.

+ +

Stacking context example 1

+ +

Wenn dann DIV #4 ebenfalls einen positiven z-index zugewiesen bekommt, der größer ist als der z-index von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.

+ +

Stacking context example 1

+ +

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 z-index 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.

+ +

In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:

+ + + +
Hinweis: 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 z-index Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.
+ +

Beispiel

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.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;
+}
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

See also

+ + + +
+

Original Dokumenteninformation

+ + +
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 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 2

+ +

Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des Stapelkontexts. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270') }}

+ +

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 z-index Werte bestimmen, wie Elemente gestapelt werden.

+ +

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.

+ +

Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:

+ + + +
Hinweis: 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.
+ +

Beispiel

+ +

HTML

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+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;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
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 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 3

+ +

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.

+ +

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.

+ +

Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330') }}

+ +

Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.

+ +

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 {{cssxref("z-index")}} 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.

+ +

Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben z-index Wert haben und die Standard-Stapelregeln gelten.

+ +

Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:

+ + + +

Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) z-index Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.

+ +
Hinweis: 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.
+ +

Beispiel Quellcode

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+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;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
+ +

Hinweis: 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.

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 +--- +
{{cssref}}
+ +

Wenn die CSS-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    4. +
+ +

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.

+ +

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.

+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Quellcode für das Beispiel

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
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;
+}
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

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