left
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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 position: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.
Pruébalo
left: 0; left: 4em; left: 10%; left: 20px; <section id="default-example"> <div class="example-container"> <div id="example-element">I am absolutely positioned.</div> <p> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </p> </div> </section> .example-container { border: 0.75em solid; padding: 0.75em; text-align: left; position: relative; width: 100%; min-height: 200px; } #example-element { background-color: #264653; border: 4px solid #ffb500; color: white; position: absolute; width: 140px; height: 60px; } | Valor inicial | auto |
|---|---|
| Applies to | positioned elements |
| Heredable | no |
| Percentages | refer to the width of the containing block |
| Valor calculado | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
| Animation type | a length, percentage or calc(); |
Sintaxis
left: <length> | <percentage> | auto | inherit ;
Valores
<length>-
Una longitud, un valor negativo, cero, un valor positivo.
<percentage>-
Un porcentaje del ancho del bloque contenedor.
Ejemplos
CSS
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
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> Especificaciones
| Specification |
|---|
| CSS Positioned Layout Module Level 3 # insets |