Características left en CSS

Una propiedad left en CSS que determina la posición horizontal de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.

Funciones left css

Valor inicial	`auto`
Aplicado a	Elementos posicionados.
Heredable	No
Móvil	Sí
Valor calculado	Como se especifica, pero con longitudes relativas convertidas a absolutas.

/* <longitud> valores */ 
left :  3px ; 
left :  2.4em ;
/* <porcentajes> valores relativos */ 
/* tomados en relación con el ancho del bloque contenedor del elemento */ 
left :  10%;
/* palabra reservada */ 
left :  auto ;
/* valores globales */ 
left: inherit;
left: initial;
left: unset;

El efecto de la propiedad left depende del valor de la propiedad position:

Cuando la propiedad se establece position en absolute o fixed, la propiedad establece la left distancia entre el borde izquierdo del elemento y el borde izquierdo de su bloque contenedor.
Cuando la propiedad se establece position en relative, la propiedad determina cuánto left se moverá el borde izquierdo del elemento sobre su posición normal.
Pero cuando la propiedad se establece position en sticky, la propiedad left actuará como si la posición del elemento relative fuera cuando está en la ventana gráfica, y fixed actuará como si no estuviera en la ventana gráfica.
Cuando la propiedad se establece positionen static(es decir, el elemento no puede cambiar su ubicación), la propiedad no tendrá left ningún efecto.

Cuando se especifican valores para las propiedades left y right la posición del elemento se especifica de más de una forma, la propiedad tendrá left prioridad en los right contenedores de izquierda a derecha y la propiedad tendrá prioridad en los contenedores de derecha a izquierda.

Ejemplos y aplicaciones en código

Este ejemplo muestra el uso de la palabra reservada autocon un elemento de <div> posición absoluta:

< div  class = "parent" > 
    < span > elemento principal del contenedor </ span > 
    < div  class = "actual" > posición real </ div > 
</ div >

Código CSS:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}
.actual {
  position: absolute;
  left: auto;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Ejemplo de uso de un valor longitudinal <length> con la posición del elemento establecida en relativa relative a través de la propiedad position. Observe cómo el elemento se moverá hacia la derecha en relación con su posición original:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}
.actual {
  position: relative;
  left: 20px;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Y este ejemplo trata sobre el uso de la propiedad left con un elemento cuya posición es absoluta:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
  position: relative;
}
.actual {
  position: absolute;
  left: 0;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	5.5	5	1.0

Características generales

<length>

Un valor longitudinal <length> negativo o positivo que representa:

La distancia entre el borde izquierdo del elemento y el borde izquierdo de su bloque contenedor. Si la posición del elemento es absolutamente (absolutamente posicionado)
La distancia que el borde izquierdo del elemento se moverá por encima de su posición normal. Esto es si el elemento está relativamente posicionado.

<percentage>

Un porcentaje de la altura del bloque que contiene el elemento.

auto

Si la posición del elemento es absoluta, este valor hará que la posición del elemento se determine en función del valor de la propiedad right.
Si la posición del elemento es relativa, este valor establecerá la posición del elemento según el valor de la propiedad desde la posición inicial del elemento, y si el valor de la propiedad también es igual, el elemento right no se moverá horizontalmente right auto.

Estructura left css

left: <length> | <percentage> | auto;

Consulte también

La página de propiedades position que describe cómo se coloca el objeto en el documento.
La página de cada una de las propiedades top, bottom, right responsable de ubicar el elemento.