La propiedad izquierda en CSS se usa para especificar la posición horizontal de un elemento posicionado. No tiene efecto sobre elementos no posicionados.
Nota:
- Si la propiedad de posición es absoluta o fija, la propiedad izquierda especifica la distancia entre el borde izquierdo del elemento y el borde izquierdo del bloque que lo contiene.
- Si la propiedad de posición es relativa, la propiedad izquierda especifica la distancia del borde izquierdo del elemento que se mueve hacia la derecha desde su posición normal.
- Si la propiedad de posición es fija, la propiedad de la izquierda se comporta como si su posición fuera relativa cuando el elemento está dentro de la ventana gráfica, y como si su posición fuera fija cuando está fuera.
- Si la propiedad de posición es estática, la propiedad de la izquierda no tiene efecto.
- Si se definen las propiedades izquierda y derecha, el valor de la izquierda tiene prioridad cuando el contenedor es de izquierda a derecha y el valor de la derecha tiene prioridad cuando el contenedor es de derecha a izquierda.
Sintaxis:
left: length|percentage|auto|initial|inherit;
Valores de propiedad:
- longitud: se utiliza para especificar la longitud de la propiedad izquierda. Acepta valores positivos y negativos.
- porcentaje: Especifica el ancho del bloque contenedor en porcentaje.
- auto: se utiliza para establecer la propiedad izquierda en su valor predeterminado.
- initial: Se utiliza para especificar la propiedad de la izquierda a su valor predeterminado.
- heredar: Establece la propiedad izquierda de su padre.
Ejemplo 1: este ejemplo describe la propiedad de posición como absoluta.
<!DOCTYPE html>
<html>
<head>
<title>
CSS left Property
</title>
<style>
body {
color: Green;
text-align: center;
}
.GFG1 {
position: absolute;
left: 129px;
width: 500px;
height: 200px;
border: 5px solid orange;
}
.GFG2 {
position: absolute;
left: 77%;
width: 140px;
height: 70px;
border: 5px solid red;
}
.GFG3 {
position: absolute;
left: auto;
width: 350px;
height: 170px;
border: 5px solid green;
}
.GFG4 {
position: absolute;
left: initial;
width: 200px;
height: 100px;
border: 5px solid maroon;
}
.GFG5 {
position: absolute;
left: inherit;
width: 200px;
height: 100px;
border: 5px solid black;
}
</style>
</head>
<body>
<h1>The left Property</h1>
<div class = "GFG1">length
<div class="GFG2">percentage</div>
<div class="GFG3">auto</div>
</div>
<div class = "GFG4">initial</div>
<div class = "GFG5">inherit</div>
</body>
</html>
Producción:
Nota: Los contenedores de initial y heritage se superponen debido a que tienen dimensiones y valores predeterminados similares.
Ejemplo 2: Este ejemplo describe la propiedad de posición relativa.
<!DOCTYPE html>
<html>
<head>
<title>
CSS left Property
</title>
<style>
body {
color: Green;
text-align: center;
}
.GFG1 {
position: relative;
left: 129px;
width: 500px;
height: 200px;
border: 5px solid orange;
}
.GFG2 {
position: relative;
left: 77%;
width: 140px;
height: 70px;
border: 5px solid red;
}
.GFG3 {
position: relative;
left: auto;
width: 350px;
height: 170px;
border: 5px solid green;
}
.GFG4 {
position: relative;
left: initial;
width: 200px;
height: 100px;
border: 5px solid maroon;
}
div.e {
position: relative;
left: inherit;
width: 200px;
height: 100px;
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>The left Property</h1>
<div class="GFG1">length
<div class="GFG2">percentage</div>
<div class="GFG3">auto</div>
</div>
<div class="GFG4">initial</div>
<div class="GFG4">inherit</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad izquierda se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Safari 1.0
- Ópera 5.0
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA