Usando la posición en CSS

CSS proporciona diferentes propiedades para diseñar las páginas web creadas en HTML. Usando estas propiedades, puede diseñar diferentes elementos. Una propiedad más fantástica es la "posición" propiedad. CSS "posiciónLa propiedad es una de las propiedades más comunes y esenciales utilizadas para ajustar la posición de los elementos HTML.

Este manual lo guiará sobre la propiedad de la posición CSS. Vamos a empezar.

¿Cuál es la propiedad de "posición" de CSS??

En CSS, el "posición"Se usa para especificar dónde aparecerá un elemento en la página en función de su posición. Combinarlo con las propiedades CSS superior, derecha, inferior e izquierda determina dónde se colocará el elemento.

Sintaxis

La sintaxis de la propiedad de posición CSS se da a continuación:

Posición: valores

En lugar de "valor", Puede establecer la posición de elementos como"estático","relativo","absoluto", y "fijado".

Echemos un vistazo más de cerca a cada valor con ejemplos para comprender cómo afectan la posición de los elementos de la página.

Ejemplo

En HTML, agregaremos dos contenedores dentro de la etiqueta del cuerpo y asignaremos el nombre de clase al primer div as a "div1"Y el segundo div as a"div2":

Div 1
Div 2

Después de eso, peinaremos el cuerpo de la página web usando "cuerpo"En CSS y establece el color de fondo del cuerpo como"RGB (127, 255, 212)":

cuerpo
Color de fondo: RGB (127, 255, 212);

Se puede ver que el color de fondo se aplica en la página web:

En nuestro archivo CSS, use "div"Aplicar las mismas propiedades a los contenedores a la vez. Ajuste el ancho y la altura del Div como "100px"Y el margen como"30px". Para establecer la forma de los Divs, use el "radio fronterizo"Propiedad y establecer su valor como"30px". A continuación, ajuste el texto del DIV usando el "texto alineado"Propiedad para establecer el texto DIV en el"centro"Posición y el"altura de la línea"Propiedad como"100px":

div
Ancho: 100px;
Altura: 100px;
margen: 30px;
Border-Radius: 10px;
Text-Align: Center;
Línea de altura: 100px;

Después de eso, establezca el color del div para diferenciarlos. Para hacerlo, use ".div1"Para acceder al primer div y establecer su color de fondo como"RGB (236, 226, 128)":

.Div1
Color de fondo: RGB (236, 226, 128);

Ahora, utiliza ".div2"Para acceder al segundo div y establecer su color de fondo como"RGB (187, 166, 214)":

.Div2
Color de fondo: RGB (187, 166, 214);

El resultado del código de mención anterior se proporciona a continuación:

¿Qué es la posición "estática" en CSS??

"estático"Se usa para establecer la posición con respecto al flujo de página normal. Se establece por defecto. Además, las propiedades superior, inferior, izquierda y derecha no tienen ningún efecto en ellas.

Ejemplo

Aquí, estableceremos la posición de ambos Div como estática. Tenga en cuenta que todas las demás propiedades de ambos contenedores seguirán siendo las mismas:

.Div1
…
Posición: estática;

.Div2
…
Posición: estática;

Puede ver que los Divs se colocan en su posición original:

¿Qué es la posición "relativa" en CSS??

Para establecer la posición del elemento en relación con su posición normal, el "relativoSe utiliza el valor de la propiedad de la posición.

Ejemplo

Estableceremos la posición de "div1" como "relativo" y "div2" como "absoluto". Aquí, el segundo div se coloca según el Div1:

.Div1
…
Posición: relativo;

.Div2
…
Posición: Absoluto;

Aquí está el resultado que demuestra que DIV2 se ajusta de acuerdo con la posición de Div 1:

¿Qué es la posición "fija" en CSS??

Los elementos HTML se pueden solucionar en el navegador utilizando el "fijado"Valor de la propiedad Position. La posición de los elementos fijos está determinada por la ventana gráfica, el área del documento que es visible en este momento. Usando la ventana del navegador como referencia, este elemento fijo se coloca en relación con ella.

Ejemplo

Estableceremos la posición de "div1" como "fijado" y "div2" como "estático". Aquí, usaremos el valor estático para establecer la posición de "div2"Según el flujo de página normal:

.Div1
…
Posición: fijo;

.Div2
…
Posición: estática;

Aquí, puedes ver que la posición de "div1"Es arreglado y"div2"Se establece de acuerdo con el flujo de la página:

¿Qué es la posición "absoluta" en CSS??

En "absolutoPosicionamiento, el elemento se coloca en relación con el primer elemento principal, que no es estático. Además, un elemento se puede colocar en cualquier lugar de una página utilizando el posicionamiento absoluto.

Ejemplo

Estableceremos la posición de "div1" como "relativo" y "div2" como "absoluto". Después de eso, usaremos el "abajo"Propiedad como"5px"Para establecer el Div2 en la parte inferior de la página:

.Div1
…
Posición: relativo;

.Div2
…
Posición: Absoluto;
Abajo: 5px;

La siguiente imagen muestra que el DIV2 se coloca en la parte inferior de la página:

Eso es todo! Hemos explicado la descripción de la propiedad del puesto en detalle.

Conclusión

Para establecer la posición del elemento HTML, el "posiciónSe utiliza la propiedad de CSS. La propiedad de posición admite cuatro valores diferentes, como estática, relativa, fija y absoluta. En este artículo, hemos explicado la propiedad de la posición en detalle y proporcionamos ejemplos para todos sus valores.