Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
left
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 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
#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>
Especificaciones
| Specification |
|---|
| CSS Positioned Layout Module Level 3 # insets |
Compatibilidad con navegadores
Enable JavaScript to view this browser compatibility table.