La posición de los elementos HTML juega un papel vital en la organización de los componentes de la página web. Más específicamente, la posición de los elementos se puede ajustar utilizando el CSS "posición" propiedad. Esta propiedad puede estar asociada con las propiedades de desplazamiento, como las propiedades superior, izquierda, derecha e inferior, proporcionando valores específicos para ajustar el elemento en la página. Sin embargo, el "absolutoLos elementos posicionados se pueden ajustar en relación con el elemento posicionado más cercano.

Esta publicación explicará el posicionamiento absoluto de CSS.

Propiedad de "posición" CSS

El "posición"La propiedad en CSS se puede utilizar para ajustar la posición del elemento. Diferentes valores de la propiedad de posición son fijos, absolutos, relativos, estáticos y pegajosos. Estos valores se establecen con las propiedades de desplazamiento, como la parte superior, derecha, izquierda e inferior, para ajustar la posición del elemento.

Cómo aplicar el posicionamiento absoluto CSS?

El posicionamiento absoluto del elemento se puede aplicar utilizando el CSS "posición"Propiedad con el valor"absoluto". El elemento con la posición absoluta se ajusta correspondiente a su elemento principal posicionado más cercano. Pero si el antepasado no está posicionado, se ajustará en relación con la sección del cuerpo del documento.

Ejemplo

Entendamos el concepto con un ejemplo práctico.

Paso 1: crear un archivo HTML

En el archivo HTML, dentro del elemento del cuerpo, agregue un DIV con el nombre de la clase "principal". Luego, dentro del Div creado, agregue una etiqueta HTML asociada con los siguientes atributos:

• • "SRC"Proporciona un enlace a la imagen.
  • "clase"Se usa en el CSS para diseñar los elementos.
  • "alternativo"El atributo especifica el texto que se muestra en lugar de la imagen si la imagen no se carga en la página.
  • "alternativo"El atributo especifica el texto que se muestra en la página en lugar de la imagen si la imagen no se carga en la página.

Luego, agregue otro DIV que contenga el encabezado y los elementos H1 y P del párrafo:

El posicionamiento absoluto de CSS

Hola equipo de Linuxhint!

En CSS, se utilizan varias propiedades de estilo para decorar los elementos HTML.

Paso 2: Elementos de estilo "Todos" de estilo

*
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

Los elementos HTML tienen el estilo utilizando el "Familia tipográfica"Propiedad con el valor"Verdana, Ginebra, Tahoma, Sans-Serif". Esta lista de valores garantiza que si el navegador no admite el primer estilo, el otro se aplicará.

Paso 3: Estilo "Inicio" Div

.hogar
Posición: Absoluto;
Arriba: 50px;
Izquierda: 45px;

A continuación se muestran las propiedades aplicadas al "hogar"Div:

• • "posición"La propiedad establece la posición del elemento. Aquí, el agregado "absoluto"Colocará el elemento en relación con la sección del cuerpo del HTML.
  • "arribaLa propiedad se utiliza para el ajuste vertical del elemento.
  • "izquierdaLa propiedad se utiliza para el ajuste horizontal del elemento.

Paso 4: Estilo "Contenido" Div

.contenido
Color de fondo: CadetBlue;
Ancho: 300px;
Altura: 250px;
ROLDE-LEFUNDA: 40px;
margen-izquierda: 80px;

A continuación se muestran las propiedades CSS que se aplican al "contenido"Div:

• • "color de fondo"La propiedad establece el color de fondo del elemento.
  • "ancho"La propiedad establece el ancho del elemento.
  • "altura"La propiedad establece la altura del elemento.
  • "pesadillaLa propiedad está configurada para agregar espacio al lado izquierdo del contenido del elemento.
  • "margen de pesa"La propiedad especifica el espacio en el lado izquierdo del elemento.

En este punto, nuestra página web se verá así:

Se puede ver en el resultado anterior que la imagen de la casa Div se coloca a 50 px desde la parte superior y a 45 px desde la izquierda del cuerpo del documento. Además, la posición del Div Home se establece en relación con la sección del cuerpo del HTML.

Cómo ajustar la posición del elemento "relativo" al elemento principal posicionado?

Esta sección lo guiará para ajustar la posición del elemento en relación con el elemento principal de la posición más cercana.

Establecer la propiedad "Position" de "Content" Div

Posición: relativo;

Para ajustar la posición del elemento en relación con el elemento principal, establezca el "posición"Propiedad del elemento principal a"relativo" valor.

Establecer propiedad "Posición" del elemento "IMG"

.hogar
Posición: Absoluto;
arriba: 100px;
Izquierda: 220px;

Aquí:

• • "posición"Propiedad con el valor establecido como"absoluto"Se posicionará en relación con el elemento principal (es decir, la posición Div de contenido se establece con el valor relativo).
  • "arribaSe utiliza la propiedad para establecer la posición del elemento desde la parte superior.
  • "izquierdaSe utiliza la propiedad para establecer la posición del elemento desde la izquierda.

Producción

Se puede ver desde el resultado que la imagen se ha colocado en relación con su principal Div, y parece adecuado.

Conclusión

El CSS "posiciónLa propiedad se utiliza para establecer la posición de los elementos HTML. Esta propiedad puede valorarse como fija, relativa, absoluta, pegajosa y estática. El "absoluto"El valor posicionará el elemento correspondiente a su elemento principal posicionado cercano. Esta publicación ha explicado el posicionamiento absoluto de CSS con un ejemplo práctico.