left
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
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 |
Compatibilidad con navegadores
BCD tables only load in the browser