From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/left/index.html | 144 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/es/web/css/left/index.html (limited to 'files/es/web/css/left') diff --git a/files/es/web/css/left/index.html b/files/es/web/css/left/index.html new file mode 100644 index 0000000000..8a7912b86d --- /dev/null +++ b/files/es/web/css/left/index.html @@ -0,0 +1,144 @@ +--- +title: left +slug: Web/CSS/left +translation_of: Web/CSS/left +--- +

{{CSSRef}}

+ + +

La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

+ +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

+ +
{{EmbedInteractiveExample("pages/css/left.html")}}
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
left: <length> | <percentage> | auto | inherit ;
+
+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud, un valor negativo, cero, un valor positivo.
+
{{cssxref("<percentage>")}}
+
Un porcentaje del ancho del bloque contenedor.
+
+ +

Ejemplos

+ +

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>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative position in relation to its siblings.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relative to its sibling div above, but removed from flow of content.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>Absolute position inside of a parent with relative position</p>
+    </div>
+  </div>
+</div>
+ +

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

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + +

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

+ + +

Ver también

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