CSS: propiedad izquierda

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad izquierda

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada permanecer Con sintaxis y ejemplos.

describir

La propiedad izquierda de CSS, combinada con la propiedad de posición, define la posición izquierda de un elemento.

sintaxis

La sintaxis de la propiedad CSS izquierda es:

left: value;

parámetro o parámetro

valor

El valor l al posicionar un elemento usando la propiedad de posición. Puede ser uno de los siguientes:

valor describir
estable Un valor fijo en píxeles, em, etc.
div { posición: relativa; izquierda: 10px; }
div {posición: absoluta; izquierda: 5em; }
porcentaje valor porcentual
div { posición: fijo; izquierda: 15%; }
carro Este es el comportamiento predeterminado
div { posición: relativa; izquierda: auto; }
heredar Indica que el elemento heredará la izquierda de su elemento padre
div {posición: heredar;}

notas

  • Cuando el valor se proporciona como un porcentaje, es relativo al ancho del bloque que lo contiene.
  • Si la propiedad de posición se establece en relativa, absoluta o fija, puede establecer las propiedades superior, derecha, inferior e izquierda.
  • Si la propiedad de posición se establece en estática, las propiedades superior, derecha, inferior e izquierda no se aplican.
  • Consulte también las propiedades de posición, superior, derecha e inferior.

Compatibilidad del navegador

La propiedad izquierda de CSS tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Navegador de Internet (IE)
    • Estático, Relativo, Absoluto: IE 4
    • Corregido: IE 7
  • ópera
  • Safari (WebKit)

ejemplo

Discutiremos la propiedad izquierda a continuación, explorando ejemplos de cómo usarla en CSS.

posición relativa

Veamos un ejemplo en el que establecemos la propiedad de posición en relativa y establecemos un valor para la propiedad de la izquierda.

CSS se ve así:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: relative; top: 20px; left: 15px; }

HTML se ve así:

<div >
  <div >Div 1 - prograrmaplus.com</div>
  <div >Div 2 - prograrmaplus.com</div>
  <div >Div 3 - prograrmaplus.com</div>
</div>

El resultado se verá así:

En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición relativa, la propiedad superior en 20 píxeles y la propiedad izquierda en 15 píxeles. Esto significa que el elemento div (identificado por la clase totn2) se moverá 20 píxeles hacia abajo y 15 píxeles hacia la izquierda en relación con el lugar en el que se colocaría en el diseño normal.

posición absoluta

Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en absoluto y establecer un valor para la propiedad de la izquierda.

CSS se ve así:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: absolute; top: 20px; left: 15px; }

HTML se ve así:

<div >
  <div >Div 1 - prograrmaplus.com</div>
  <div >Div 2 - prograrmaplus.com</div>
  <div >Div 3 - prograrmaplus.com</div>
</div>

El resultado se verá así:

En este ejemplo de posición de CSS, configuramos la clase totn2 en posición absoluta, la propiedad top en 20 px y la propiedad left en 15 px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de su contenedor principal a una posición absoluta de 20 px desde la parte superior del contenedor y 15 px desde el lado izquierdo del contenedor.

Entonces, en este ejemplo, el segundo div está en la parte superior del primer div (identificado por la clase totn1).

Posición fija

Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en fijo y establecer un valor para la propiedad de la izquierda.

CSS se ve así:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: fixed; top: 20px; left: 15px; }

HTML se ve así:

<div >
  <div >Div 1 - prograrmaplus.com</div>
  <div >Div 2 - prograrmaplus.com</div>
  <div >Div 3 - prograrmaplus.com</div>
</div>

El resultado se verá así:

En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición fija, la propiedad superior en 20 píxeles y la propiedad izquierda en 15 píxeles. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de la ventana gráfica de la pantalla a una posición fija de 20 píxeles desde la parte superior de la ventana gráfica y 15 píxeles desde la izquierda de la ventana gráfica.

Se ve muy similar al resultado del ejemplo de posición absoluta. La única excepción es que cuando nos desplazamos usando el ejemplo de posición fija, el segundo div (identificado por la clase totn2) permanecerá fijo en la ventana gráfica de la pantalla y no se desplazará fuera de la pantalla.

(Visited 8 times, 1 visits today)