Propiedad de posición CSS | Explicado

Las hojas de estilo en cascada (CSS) consisten en una amplia gama de propiedades que se utilizan para diseñar elementos HTML, por ejemplo, la propiedad de color se utiliza para dar texto en las páginas web, algún color, la propiedad de visualización define el comportamiento de los elementos HTML, la propiedad fronteriza Define las especificaciones fronterizas de un elemento, y la lista continúa. Sin embargo, este artículo está diseñado para arrojar luz sobre la propiedad de posición de CSS. Esta guía cubre lo siguiente.

1. Propiedad de la propiedad
2. Cómo asignar posicionamiento relativo a un elemento HTML
3. Cómo asignar posicionamiento absoluto a un elemento HTML
4. Cómo dar una posición fija a un elemento HTML

Propiedad de la propiedad

La propiedad de posición de CSS especifica la posición de un elemento HTML en una página web. Tiene la sintaxis mencionada.

Posición: valor;

Aquí hay un ejemplo para demostrar aún más la propiedad de posición.

Cómo asignar posicionamiento relativo a un elemento HTML

Este ejemplo demuestra el valor relativo de la propiedad de posición que coloca un elemento con respecto a su posición original.

En este ejemplo, estamos colocando una imagen en una determinada posición utilizando el valor relativo de la propiedad de posición.

Html

CSS

.imagen
Posición: relativo;
Izquierda: 80%;
arriba: 0%;
Altura: 100px;
Ancho: 200px;

Producción

Aquí la imagen se coloca un 80% desde la izquierda de la página con respecto a su posición original.

La posición predeterminada de la imagen es la siguiente.

Hay algunos valores que se pueden asignar a la propiedad de posición de CSS, que son los siguientes.

Valor	Descripción
estático	Este es el valor predeterminado que coloca elementos de acuerdo con su posición definida en el documento.
relativo	Posiciona un elemento con respecto a su posición original.
absoluto	Posiciona un elemento con referencia a la posición del ancestro del elemento.
fijado	Posiciona un elemento con respecto a la ventana del navegador.
pegajoso	Posiciona un elemento con referencia a la posición de desplazamiento del usuario.
inicial	Posiciona un elemento a su valor predeterminado.
heredar	Posiciona un elemento con respecto a las propiedades heredadas de su elemento principal.

Algunos ejemplos más

Para su mejor comprensión, hemos ilustrado la propiedad de posición con la ayuda de algunos ejemplos más.

Cómo asignar posicionamiento absoluto a un elemento HTML

Este ejemplo demuestra el valor absoluto de la propiedad de posición.

Html

Padre Div
Niño Div

Aquí dos ejemplos son elementos que se crean uno se considera como el padre Div y el otro como niño div.

CSS

Se le ha asignado al Div Padre la posición relativa y al niño Div ha sido asignado la posición absoluta. Como sabemos, el valor absoluto posiciona un elemento con respecto a la posición de su padre, por lo tanto, para que el niño Div tenga una posición absoluta con respecto al Div de los padres, hemos asignado a los padres la posición relativa.

Producción

El niño div se ha colocado en una posición absoluta con respecto al Div de los padres.

Cómo dar una posición fija a un elemento HTML

Este ejemplo demuestra el valor fijo de la propiedad de posición.

Html

Div Div

Div rojo

Div Div

Hemos creado tres elementos uno por el nombre Yellow Div, segundo con el nombre Red Div y el tercer div por el nombre Green Div.

CSS

.amarillo
Color de fondo:#FFE162;
Ancho: 400px;
Altura: 500px;

.rojo
Color de fondo:#FF6464;
Ancho: 300px;
Altura: 350px;

.verde
Color de fondo:#91C483;
Ancho: 200px;
Altura: 100px;
Posición: fijo;
Izquierda: 70%;
arriba: 50%;

pags
relleno: 20px 0;
Text-Align: Center;
Font-Family: 'Segoe ui', Tahoma, Ginebra, Verdana, Sans-Serif

En el ejemplo anterior, solo se le asigna al Div Verde la posición fija, por lo tanto, cuando desplaza la página web, el Div verde permanece fijo en su posición con respecto a la ventana del navegador.

Producción

El Div Green ha sido asignado con éxito el posicionamiento fijo.

Conclusión

La propiedad de posición de CSS especifica la posición de un elemento HTML en una página web, además, los valores que esto puede exhibir son; estática que es el valor predeterminado, el valor absoluto posiciona un elemento con respecto a su elemento principal, el valor fijo posiciona un elemento con respecto a la ventana del navegador, el valor relativo posiciona un elemento con respecto a su posición original y posiciones de valor pegajoso un elemento con respeto a la posición de desplazamiento del usuario. La propiedad de posición y sus diversos valores se ilustran en este artículo con la ayuda de ejemplos.