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/position/index.html | 104 +++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/de/web/css/position/index.html (limited to 'files/de/web/css/position/index.html') diff --git a/files/de/web/css/position/index.html b/files/de/web/css/position/index.html new file mode 100644 index 0000000000..7acf3f3009 --- /dev/null +++ b/files/de/web/css/position/index.html @@ -0,0 +1,104 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Referenz +translation_of: Web/CSS/position +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die position Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften top, right, bottom oder left verwendet.

+ +

Ein positioniertes Element ist ein Element für das absolute, fixed oder relative als position definiert wurde.
+ Ein absolut positioniertes Element ist ein Element für das absolute oder fixed als position definiert wurde.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +

Werte

+ +
+
static
+
Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften top, right, bottom oder left haben keine Auswirkungen.
+
relative
+
Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei table-*-group, table-row, table-column, table-cell, und table-caption Elementen ist kein Effekt definiert.
+
absolute
+
Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.
+
sticky {{Experimental_inline}}
+
Eine Mischung zwischen fixed und relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.
+
fixed
+
Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf jeder Seite an der positionierten Stelle angezeigt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +

Das folgende Beispiel verdeutlicht den Unterschied zwischen position: absolute und position: fixed. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit fixed positionierte Element fest an seiner Position.

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Position absolute und fixed</title>
+<style type="text/css">
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+</style>
+</head>
+<body>
+  <p>This<br>is<br>some<br>tall,<br>tall,
+    <br>tall,<br>tall,<br>tall<br>content.</p>
+  <div id="fix" class="pos"><p>Fixed</p></div>
+  <div id="abs" class="pos"><p>Absolute</p></div>
+</body>
+</html>
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS3 Positioning')}}{{Spec2('CSS3 Positioning')}}sticky hinzugefügt
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.position")}}

+ +

Siehe auch

+ + + +

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

-- cgit v1.2.3-54-g00ecf