From d192fb918b0e2aa8869de6dcc59de8464b6e879a Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 11 Dec 2020 18:59:39 -0500 Subject: dump 2020-12-11 --- .../adding_z-index/index.html | 48 +++-- .../understanding_z_index/index.html | 38 ++-- .../the_stacking_context/index.html | 48 ++--- files/de/web/css/float/index.html | 218 ++++++++++++++++----- files/de/web/css/url/index.html | 3 +- files/de/web/css/vertical-align/index.html | 62 +++--- files/de/web/css/widows/index.html | 2 +- files/de/web/css/z-index/index.html | 6 +- files/de/web/mathml/attribute/index.html | 79 ++++---- 9 files changed, 322 insertions(+), 182 deletions(-) (limited to 'files/de/web') diff --git a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index ff78bd192a..1345ed23df 100644 --- a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -1,5 +1,5 @@ --- -title: Using z-index +title: Stapeln mit z-index slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index tags: - CSS @@ -9,36 +9,34 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index ---
{{cssref}}
-

The first part of this article, Stacking without the z-index property, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a positioned element.

+

Im ersten Teil dieses Artikels, Stapeln ohne die Eigenschaft z-index, wird erklärt, wie die Stapelung standardmäßig angeordnet wird. Wenn Sie eine benutzerdefinierte Stapelreihenfolge erstellen möchten, können Sie die Eigenzschaft {{cssxref("z-index")}} bei einem positionierten Element verwenden.

-

The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers.

+

Die Eigenschaft z-index kann mit einem ganzzahligen Wert (positiv, null oder negativ) angegeben werden, der die Position des Elements entlang der z-Achse darstellt. Wenn Sie mit der z-Achse nicht vertraut sind, stellen Sie sich die Seite als einen Stapel von Ebenen vor, von denen jede eine Nummer hat. Die Ebenen werden in numerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren Zahlen stehen.

-

Notes:

-
-

In the following example, the layers' stacking order is rearranged using z-index. The z-index of element #5 has no effect since it is not a positioned element.

+

Im folgenden Beispiel wird die Stapelreihenfolge der Ebenen mithilfe des z-index neu angeordnet. Der z-index von Element Nr. 5 hat keine Auswirkung, da es sich nicht um ein positioniertes Element handelt.

-

{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+

Example of stacking rules modified using z-index

Beispiel

@@ -142,12 +140,12 @@ b {

Siehe auch

@@ -155,7 +153,7 @@ b {
diff --git a/files/de/web/css/css_positioning/understanding_z_index/index.html b/files/de/web/css/css_positioning/understanding_z_index/index.html index 7f44be02c9..9f7b3dd401 100644 --- a/files/de/web/css/css_positioning/understanding_z_index/index.html +++ b/files/de/web/css/css_positioning/understanding_z_index/index.html @@ -1,5 +1,5 @@ --- -title: Understanding CSS z-index +title: CSS z-index verstehen slug: Web/CSS/CSS_Positioning/Understanding_z_index tags: - Advanced @@ -14,38 +14,38 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---
{{cssref}}
-

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+

In den meisten einfachen Fällen können HTML-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.

-

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+

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.

-

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+

(von CSS 2.1 Section 9.9.1 - Layered presentation)

-

This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+

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 z-index gesteuert werden

-

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+

Die Verwendung von z-index 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 CSS-2.1 Anhang E ein eigener Abschnitt reserviert, um diese Regeln besser zu erklären.

-

This article will try to explain those rules, with some simplification and several examples.

+

Dieser Artikel wird versuchen, diese Regeln zu erklären, mit einigen Vereinfachungen und mehreren Beispielen.

    -
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. -
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. -
  3. Using z-index: How to use z-index to change default stacking.
    4. -
  4. The stacking context: Notes on the stacking context.
    5. -
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. -
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. -
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. +
  8. Stapeln ohne die Eigenschaft z-index: Die Stapelungsregeln, die gelten, wenn z-index nicht verwendet wird.
    9. +
  9. Stapeln mit schwebenden Blöcken: Wie schwebende Elemente beim Stapeln behandelt werden.
    10. +
  10. Verwenden von z-index: Wie Sie z-index verwenden, um die Standardstapelung zu ändern.
    11. +
  11. Der Stapelungskontext: Hinweise zum Stacking-Kontext.
    12. +
  12. Stapelungskontext-Beispiel 1: 2-stufige HTML-Hierarchie, z-index auf der letzten Stufe
    13. +
  13. Stapelungskontext-Beispiel 2: 2-stufige HTML-Hierarchie, z-index auf allen Ebenen
    14. +
  14. Stapelungskontext-Beispiel 3: 3-stufige HTML-Hierarchie, z-index auf der zweiten Ebene
-

Original Document Information

+

Original Dokumenteninformation

-

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+

Anmerkung des Autors: Danke an Wladimir Palant und Rod Whiteley für die Rezension.

diff --git a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index d814b294cf..c5e17ecc80 100644 --- a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -1,5 +1,5 @@ --- -title: The stacking context +title: Der Stapelkontext slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context tags: - CSS @@ -11,13 +11,13 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte ---
{{cssref}}
-

Der Stapelungszusammenhang ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Ansichtsfenster oder der Webseite zugewandt ist. HTML-Elemente füllen diesen Raum in Prioritätsreihenfolge auf der Grundlage von Elementattributen aus.

+

Der Stapelkontext ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Ansichtsfenster oder der Webseite zugewandt ist. HTML-Elemente füllen diesen Raum in Prioritätsreihenfolge auf der Grundlage von Elementattributen aus.

-

Der Stapelungszusammenhang

+

Der Stapelkontext

-

Im vorherigen Teil dieses Artikels, die Verwendung von z-index, wird die Darstellungsreihenfolge bestimmter Elemente durch ihren z-index Wert beeinflusst. Dies ist darauf zurückzuführen, dass diese Elemente spezielle Eigenschaften haben, die dazu führen, dass sie einen Stapelungszusammenhang bilden.

+

Im vorherigen Teil dieses Artikels, die Verwendung von {{cssxref("z-index")}}, wird die Darstellungsreihenfolge bestimmter Elemente durch ihren z-index Wert beeinflusst. Dies ist darauf zurückzuführen, dass diese Elemente spezielle Eigenschaften haben, die dazu führen, dass sie einen Stapelkontext bilden.

-

Ein Stapelungszusammenhang wird an beliebiger Stelle im Dokument durch ein beliebiges Element in den folgenden Szenarien gebildet:

+

Ein Stapelkontext wird an beliebiger Stelle im Dokument durch ein beliebiges Element in den folgenden Szenarien gebildet:

-

Innerhalb eines Stapelungszusammenhang werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die z-index Werte der untergeordneten Stapelungszusammenhänge nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelungszusammenhänge werden im übergeordneten Stapelungszusammenhang atomar als eine einzige Einheit behandelt.

+

Innerhalb eines Stapelkontext werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die z-index Werte der untergeordneten Stapelkontexte nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelkontexte werden im übergeordneten Stapelkontext atomar als eine einzige Einheit behandelt.

Zusammengefasst:

-
Hinweis: Die Hierarchie der Stapelungszusammenhänge ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelungszusammenhänge erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelungszusammenhang bilden, vom übergeordneten Stapelungszusammenhang assimiliert werden.
+
Hinweis: Die Hierarchie der Stapelkontexte ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelkontexte erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelkontext bilden, vom übergeordneten Stapelkontext assimiliert werden.

Das Beispiel

Example of stacking rules modified using z-index

-

In diesem Beispiel erzeugt jedes positionierte Element aufgrund seiner Positionierung und seiner z-index -Werte einen eigenen Stapelungszusammenhang. Die Hierarchie der Stapelungszusammenhang ist wie folgt organisiert:

+

In diesem Beispiel erzeugt jedes positionierte Element aufgrund seiner Positionierung und seiner z-index -Werte einen eigenen Stapelkontext. Die Hierarchie der Stapelkontext ist wie folgt organisiert:

- -

{{ languages( {"en": "en/CSS/float", "fr": "en/CSS/float", "es": "es/CSS/float", "pl": "pl/CSS/float"} ) }}

diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url/index.html index 52f9bad5e5..dd120e3800 100644 --- a/files/de/web/css/url/index.html +++ b/files/de/web/css/url/index.html @@ -7,7 +7,8 @@ tags: - Referenz - URI - URL -translation_of: Web/CSS/url +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url ---
{{ CssRef() }}
diff --git a/files/de/web/css/vertical-align/index.html b/files/de/web/css/vertical-align/index.html index 2a6779dbee..15729838cd 100644 --- a/files/de/web/css/vertical-align/index.html +++ b/files/de/web/css/vertical-align/index.html @@ -3,14 +3,20 @@ title: vertical-align slug: Web/CSS/vertical-align tags: - CSS - - CSS Referenz + - CSS Eigenschaft + - Referenz + - 'recipe:css-property' translation_of: Web/CSS/vertical-align ---
{{CSSRef}}
-

Die vertical-align CSS Eigenschaft bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.

+

Die CSS Eigenschaft vertical-align bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.

-
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+
{{EmbedInteractiveExample("pages/css/vertical- +
align.html")}}
+ + +

Die vertical-align Eigenschaft kann in zwei Anwendungsfällen genutzt werden:

@@ -19,7 +25,7 @@ translation_of: Web/CSS/vertical-align
-