Propiedad left de CSS
La propiedad left define el desplazamiento horizontal de un elemento posicionado con respecto a su bloque contenedor.
Especifica la distancia entre el borde izquierdo del margen del elemento y el borde izquierdo de su bloque contenedor. Si position se establece en static, la propiedad left no tiene efecto.
El efecto de left depende de cómo esté posicionado el elemento (ver propiedad position).
- Si
positionse establece enabsoluteofixed, la propiedadleftespecifica la distancia entre el borde izquierdo del elemento y el borde izquierdo de su bloque contenedor. - Si
positionse establece enrelative, la propiedadleftespecifica la distancia hacia la derecha que se desplaza el borde izquierdo del elemento desde su posición normal. - Si
positionse establece ensticky, la propiedadleftdesplaza el elemento con respecto a su bloque contenedor. El elemento se comporta como un posicionamientorelativehasta que cruza un umbral de desplazamiento, momento en el que se comporta como un posicionamientofixed. - Si
positionse establece enstatic, la propiedadleftno tiene efecto.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos posicionados. |
| Heredado | No. |
| Animable | Sí. La posición del elemento es animable. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.left = "50px"; |
Sintaxis
Sintaxis de la propiedad left de CSS
left: auto | length | initial | inherit;Ejemplo de la propiedad left:
Ejemplo de la propiedad left de CSS con la propiedad position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
left: 35px;
}
</style>
</head>
<body>
<h2>Left property example</h2>
<p>Here the left property is defined as 35px.</p>
<img src="https://es.w3docs.com/build/images/w3docs-logo-black.png" alt="CSS left property" />
</body>
</html>Resultado
Ejemplo de uso de la propiedad left cuando la imagen está dentro de un <div> elemento:
Ejemplo de la propiedad left de CSS con la etiqueta img
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
position: relative;
height: 150px;
width: 400px;
background-color: #ccc;
color: #666;
padding: 10px;
}
img {
position: absolute;
left: 200px;
}
</style>
</head>
<body>
<h2>Left property example</h2>
<div>
<img src="https://es.w3docs.com/build/images/w3docs-logo-black.png" alt="CSS left property" /> This is some div element for
<br /> which the left side is defined
<br /> as 200px.
</div>
</body>
</html>Ejemplo de la propiedad left especificada con porcentajes:
Ejemplo de la propiedad left de CSS con valor en porcentaje
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
position: absolute;
left: 20%;
top: 20%;
width: 100px;
height: 100px;
background-color: #ccc;
color: #666;
}
</style>
</head>
<body>
<h2>Left property example</h2>
<div class="example">left: 20%</div>
</body>
</html>Ejemplo de la propiedad left con todos los valores:
Ejemplo de la propiedad left de CSS con valores auto, px y % (porcentaje)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 {
position: absolute;
left: auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
.box2 {
position: absolute;
top: 190px;
left: 50px;
width: 100px;
height: 100px;
background-color: #444;
color: #fff;
}
.box3 {
position: absolute;
left: 10%;
top: 50%;
width: 100px;
height: 100px;
background-color: #666;
color: #fff;
}
.box4 {
position: absolute;
left: 20%;
top: 70%;
width: 100px;
height: 100px;
background-color: #777;
color: #fff;
}
.box5 {
position: absolute;
left: -20px;
top: 90%;
width: 100px;
height: 100px;
background-color: #999;
text-align: right;
color: #fff;
}
</style>
</head>
<body>
<h2>Left property example</h2>
<div class="box1">left: auto</div>
<div class="box2">left: 50px</div>
<div class="box3">left: 10%</div>
<div class="box4">left: 20%</div>
<div class="box5">left: -20px</div>
</body>
</html>Valores
| Valor | Descripción | Reprodúcelo |
|---|---|---|
| auto | El navegador establecerá la posición del borde izquierdo. Es el valor predeterminado de esta propiedad. | Reprodúcelo » |
| length | Establece la posición del borde izquierdo en px, cm, etc. Se permiten valores negativos. | Reprodúcelo » |
| % | Establece la posición del borde izquierdo como un porcentaje del ancho del bloque contenedor. Se permiten valores negativos. | Reprodúcelo » |
| initial | Hace que la propiedad use su valor predeterminado. | Reprodúcelo » |
| inherit | Hereda la propiedad de su elemento padre. |
Nota: En elementos posicionados, left define el desplazamiento horizontal con respecto al bloque contenedor. Si se especifican tanto left como margin-left, left tiene prioridad para los cálculos de posicionamiento.
Práctica
¿Qué se puede lograr con la propiedad 'left' en CSS?