Diferencia entre la posición de CSS relativa y absoluto

En CSS, el "posiciónLa propiedad se utiliza para establecer la posición del elemento donde se deben mostrar los elementos HTML en la página web. Esta propiedad está vinculada con las propiedades izquierda, derecha, superior e inferior para establecer la ubicación final del elemento HTML.

Este blog discutirá:

• ¿Qué son CSS "posición"Tipos?
• Cómo usar CSS "Posición: pariente" Propiedad?
• Cómo usar CSS "Posición: Absoluto" Propiedad?

¿Cuáles son los tipos de "posición" de CSS??

Hay cinco tipos de posiciones CSS:

• "estático": Los elementos posicionados estáticamente no se ven afectados por las propiedades de desplazamiento inferior, izquierda, derecha y superior. Es el valor predeterminado de un elemento HTML.
• "fijado": El elemento de posición fijo permanece en el mismo lugar donde se establece incluso en el desplazamiento de la pantalla.
• "pegajoso": Un elemento posicionado pegajoso permanecerá estático cuando el usuario desplácese la pantalla.
• "absoluto": Un elemento absoluto se coloca o se coloca en relación con el elemento HTML de antepasado más cercano o más cercano.
• "relativo": El elemento relativo se coloca en relación con su posición normal.

Ahora, antes de discutir la diferencia entre el elemento posicionado relativo y absoluto, crearemos una página web para la demostración.

Requisito previo

En HTML, primero, agregue un elemento DIV con el nombre del atributo de clase "Div-Parente". Dentro de esto, incluya cuatro etiquetas más con el nombre de la clase "div-1". Tenga en cuenta que solo el segundo tendrá dos clases ",div-1" y "colocación".

Html

Aplicemos el estilo CSS a los elementos mencionados en el bloque de código HTML anterior.

Estilo "Div-Parent" Div

.Div-Parrent
margen-top: 100px;
Posición: relativo;

El elemento div con el nombre de la clase "Div-Parente"Está diseñado con las propiedades CSS que se explican a continuación:

• "margen-topLa propiedad se utiliza para establecer el espacio en la parte superior del elemento Div.
• "posición"La propiedad se establece como"relativo”, Que posiciona o coloca el elemento seleccionado en relación con su posición normal.

Estilo "Div-1" Div

.Div-1
Color de fondo: Blueviolet;
Ancho: 200px;
Altura: 200px;
borde: 5px discontinuo #000000;
Pantalla: bloque en línea;

Aquí está la explicación de las propiedades aplicadas:

• "color de fondo"La propiedad establece el color de fondo del elemento Div.
• "anchoLa propiedad define el ancho del elemento HTML agregado.
• "altura"El valor de la propiedad representa la altura del elemento HTML.
• "borde"La propiedad aplica el borde alrededor de un elemento. Se especifica utilizando los valores para el ancho, el estilo y el color.
• "mostrar"Con el valor"bloqueo en línea"La propiedad permite la aplicación del ancho y la altura al elemento.

Cómo usar "Posición: relativo" en CSS?

Cuando configura el "posición"El valor de la propiedad como"relativo", Se mueve en relación con su posición normal. Su posición también depende de los valores como propiedades laterales. Sin embargo, otros elementos no se cambiarán el tamaño para llenar el vacío que dejó el elemento.

Estilo "Posicionamiento" Div

.posicionamiento
Color de fondo: chocolate;
Posición: relativo;
Arriba: 20px;
Izquierda: 20px;

Aquí:

• "posición"El valor de la propiedad se establece como"relativo", Que coloca el elemento en relación con su posición normal. Luego se combina con las propiedades superior, derecha, izquierda e inferior para establecer la ubicación final.
• "arriba"Propiedad con el valor"20px"Establece un espacio de 20px sobre un elemento.
• "izquierda"Propiedad con el valor"20px"Proporciona un espacio de 20 px en el lado izquierdo de un elemento.

El siguiente resultado muestra claramente que la posición de la segunda caja se mueve desde la parte superior y la izquierda:

Cómo usar "Posición: Absoluto" en CSS?

El "posición"Propiedad con el valor"absoluto"Cambia la posición del elemento en relación con su Padre Posticado Div. Si la posición del elemento principal no se establece relativo, entonces el DIV se moverá en relación con el cuerpo de la página web. Además, otros elementos llenarán el espacio dejado por el elemento.

Cambiemos el "posición"Propiedad del Div con la clase llamada"colocación"De relativo a absoluto y vea la diferencia:

Posición: Absoluto;

El segundo cuadro se establece en un espacio 20px desde la parte superior y el espacio de 20 px desde la izquierda en relación con su elemento principal:

Eso se trataba de la posición relativa y absoluta en CSS.

Conclusión

En CSS, para definir la ubicación final del elemento, se utiliza la propiedad de posición. Más específicamente, el "relativo"La posición coloca la posición del elemento en relación con su posición normal, mientras que la"absolutoLa posición coloca el elemento en relación con su elemento HTML de los padres posicionados. Este blog discutió la diferencia entre las posiciones relativas y absolutas de CSS.