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

{{CSSRef}}

+ +

Übersicht

+ +

Die CSS Eigenschaft left definiert einen Teil der Position von positionierten Elementen.

+ +

Bei absolut positionierten Elementen (jene mit {{cssxref("position")}}: absolute oder position: fixed) wird der Abstand zwischen der linken, äußeren Rand des Elements und dem linken Rand des umschließenden Blocks definiert.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <length> Werte */
+left: 3px;
+left: 2.4em;
+
+/* <percentage> Werte bezogen auf die Breite des beinhaltenden Blocks */
+left: 10%;
+
+/* Schlüsselwortwerte */
+left: auto;
+
+/* Globale Werte */
+left: inherit;
+left: initial;
+left: unset;
+
+ +

Werte

+ +
+
<length>
+
Ist eine negative, null oder positive {{cssxref("<length>")}}, die folgendem entspricht: +
    +
  • für absolute positionierte Elemente, die Distanz zum linken Rand des beinhaltenden Blocks
    • +
  • für relativ positionierte Elemente, der Versatz, um den das Element von seiner Position im normalen Fluss nach links verschoben ist, falls es nicht positioniert wäre.
    • +
+
+
<percentage>
+
Ein {{cssxref("<percentage>")}} Wert der Breite des beinhaltenden Blocks, wie in der Übersicht beschrieben.
+
auto
+
Ist ein Schlüsselwort, das folgendem entspricht: +
    +
  • für absolut positionierte Elemente, die Position des Elements basierend auf der {{cssxref("right")}} Eigenschaft und width: auto wird als Breite basierend auf dem Inhalt behandelt.
    • +
  • für relativ positionierte Elemente, der linke Versatz des Elements von der Originalposition basierend auf der {{cssxref("right")}} Eigenschaft oder falls right ebenfalls auto ist, wird wird es nicht verschoben.
    • +
+
+
+ +

Beispiele

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+  background-color: #FFC7E4;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>Das einzige Element, das dieser Div beinhaltet, ist das Hauptfenster. Daher positioniert er sich in Bezug dazu.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative Position in Bezug auf seine Geschwisterelemente.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relativ zu seinem Geschwister-Div darüber, jedoch aus dem Inhaltsfluss entfernt.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        top: 10px;
+        left: 20px;
+      </pre>
+      <p>Absolute Position innerhalb des Elternelements mit relativer Position.</p>
+    </div>
+  </div>
+</div>
+ +

Live Beispiel

+ +

{{EmbedLiveSample('Beispiele', 1200, 650)}}

+ +

Spezifikationen

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

Browser Kompatibilität

+ +{{Compat("css.properties.left")}} + +

Siehe auch

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