Al desarrollar cualquier aplicación, la posición de los componentes debe ser apropiada para un mejor diseño. Por ejemplo, la barra de navegación se establece principalmente en la parte superior de la aplicación, y la información lateral se establece en cualquier lado del documento, principalmente en los lados superior, izquierdo o derecho. Más específicamente, el CSS le permite utilizar el "posición"Propiedad con el valor"fijado"Establecer íconos de navegación para permanecer en la misma posición en la solicitud en desplazamiento.

Este blog discutirá:

• ¿Qué es CSS "?posición" Propiedad?
• Cómo crear un elemento de posición fijo usando CSS?

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

El CSS "posiciónLa propiedad se utiliza para establecer la posición del elemento en la aplicación. Los diversos valores asociados con la propiedad de posición CSS son "estático","absoluto","relativo","fijado", y "pegajoso".

Estos valores de propiedad se pueden establecer con las otras propiedades de compensación, como "arriba","izquierda","abajo", y "bien"En CM, PX y más. Estas compensaciones ajustan la posición de los elementos en la página.

Cómo crear un elemento de posición fijo usando CSS?

En HTML, agregue el elemento Div con la clase "principal". Dentro del elemento div, coloca el elemento asociado con los siguientes atributos:

• "SRC"Se usa para especificar el enlace de la imagen.
• "clase"Atributo accede a la imagen en CSS o JavaScript utilizando el nombre especificado.
• "alternativoEl atributo se utiliza para especificar un texto alternativo que se mostrará si la imagen no se carga en la página.

Entonces, un elemento div con el nombre de la clase "contenido"Se agrega que contiene el

y

elementos para el encabezado y el párrafo, respectivamente:

El posicionamiento fijo CSS

Hola equipo de Linuxhint!

Vamos a dirigirnos a la sección CSS para decorar los elementos HTML mencionados.

Elementos de estilo "todos" de estilo

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

El asterisco " * "Se utiliza el símbolo para seleccionar todos los elementos. Todos los elementos en HTML se aplican con el "Familia tipográfica"Propiedad con el valor establecido como"Verdana, Ginebra, Tahoma, sans-serif". Esta lista de estilos se proporciona para garantizar que si el navegador no admite el primer valor, se aplicarán otros.

Estilo "Inicio" Div

.hogar
Posición: fijo;
Arriba: 35px;
Izquierda: 16px;

Las propiedades aplicadas al elemento div "hogar"Se describen a continuación:

• "posición"Se especifica para especificar la posición del elemento. El valor "fijado"Establecerá la posición del elemento fijada en el lugar específico.
• "arriba"Es la propiedad para ajustar la posición del elemento desde la parte superior.
• "izquierdaLa propiedad se utiliza para ajustar la posición del elemento desde la izquierda.

Estilo "Contenido" Div

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

Las propiedades CSS aplicadas al elemento DIV que tiene el nombre de la clase "principal" mencionado abajo:

• "color de fondo"Se especifica para configurar el color de fondo del elemento.
• "ancho"La propiedad define el ancho del elemento HTML.
• "altura"La propiedad define la altura del elemento HTML.
• "pesadillaSe utiliza la propiedad para agregar el espacio a la izquierda del contenido del elemento HTML.
• "margen de pesa"La propiedad establece espacio a la izquierda del elemento Div.

Producción

Puede observar en el resultado proporcionado anteriormente que la posición de la imagen se fija en la ventana del navegador en "35px" desde la parte superior y "16px" desde la izquierda.

Conclusión

El CSS "posición"La propiedad está asociada con el valor"fijadoValor para establecer la posición del elemento fijado a un punto. Además, esta propiedad se ajusta con sus propiedades de desplazamiento, como la parte inferior, superior, derecha e izquierda. Este blog ha demostrado el método para hacer la posición fija del elemento en CSS con un ejemplo práctico.