Comprender la propiedad de posición CSS con ejemplos prácticos
¿Quiere mejorar sus habilidades de diseño y mejorar la experiencia del usuario en su sitio web? Es más fácil con una comprensión completa de los diferentes métodos CSS para posicionar elementos. Puede crear una página web increíble con un conocimiento básico del diseño web. Pero el problema principal surge cuando su proyecto web se orienta más a los detalles, especialmente si requiere una alineación compleja de los elementos en la página.
Afortunadamente, puede mejorar la funcionalidad de su sitio y acelerar su flujo de trabajo utilizando el posicionamiento CSS correcto. Exploremos diferentes propiedades de posicionamiento CSS y revisemos los diferentes diseños que puede usar para crear una página web moderna.
¿Qué es la propiedad de posición CSS?
La propiedad de posición de CSS define la posición de un elemento. Puede manipular la ubicación de un elemento con propiedades de índice z , izquierda , derecha , superior e inferior . Aunque puede utilizar CSS Flexbox o CSS Grid para crear sitios web simétricos, las propiedades de posición le ayudan a crear sitios web asimétricos separando cada elemento de otros elementos.
En otras palabras, la propiedad de posición CSS permite que los elementos se muevan libremente en un documento.
La sintaxis de la propiedad de posición CSS es:
position: value;
Estos son los cinco valores que puede tomar la propiedad de posición:
- estático
- relativo
- absoluto
- reparado
- pegajoso
NOTA: Puede colocar elementos utilizando las propiedades izquierda, derecha, superior e inferior. Pero estas propiedades se comportan de manera diferente, dependiendo del valor de la posición.
Posicionamiento estático CSS
Estático es la posición predeterminada para los elementos HTML. Veamos algunos ejemplos de HTML para entenderlo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent_container utility-flex">
<div class="child_1 utility-flex">Child 01</div>
<div class="child_2 utility-flex">Child 02</div>
<div class="child_3 utility-flex">Child 03</div>
</div>
</body>
</html>Hemos colocado a tres niños en un contenedor para padres. Usaremos este ejemplo para jugar con las diferentes propiedades de posición. Aquí está el CSS base que usará cada uno de nuestros ejemplos:
.utility-flex {
display: flex;
justify-content: center;
align-items: center;
}
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
}
.child_1,
.child_2,
.child_3 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
background: #e961ee;
border: 5px solid rgb(255, 255, 255);
width: 300px;
height: 100px;
color: rgb(238, 238, 238);
border-radius: 5px;
margin: 5px;
}
Ahora, agreguemos position: static al segundo hijo con propiedades inferior y derecha.
.child_2 {
position: static;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}
Aquí está el resultado:
Como puede ver, se aplica la propiedad de borde, pero no hay diferencia en la posición del segundo hijo. Si no aplica una propiedad de posición CSS, tomará static como valor predeterminado. Esto posiciona un elemento de acuerdo con el flujo de página estándar. Cualquier elemento con una posición estática ignorará las propiedades left, right, top, bottom y z-index.
Posicionamiento relativo CSS
Cuando aplica el posicionamiento relativo, un elemento se comportará inicialmente de la misma manera que para el posicionamiento estático. Pero ahora, las propiedades left, right, top, bottom y z-index funcionarán empujando el elemento seleccionado desde su posición original en la dirección especificada.
Cambiemos el valor de posición del segundo hijo de estático a relativo con las mismas propiedades superior e inferior que antes.
.child_2 {
position: relative;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}
Aquí está el resultado:
Como puede ver, el segundo hijo se desplaza 40 px desde la parte inferior (hacia la parte superior) y 50 px desde la derecha (hacia la izquierda).
Posicionamiento absoluto CSS
Cualquier elemento con posicionamiento absoluto se elimina del flujo normal del documento. Otros elementos se comportarán como si ese elemento no existiera en el documento. La posición final del elemento la deciden las propiedades superior, inferior, izquierda y derecha.
Tenga en cuenta que un elemento con posicionamiento absoluto se posiciona en relación con su antepasado posicionado más cercano (no estático). Si no hay un ancestro posicionado, se posiciona en relación con el bloque contenedor inicial .
Entendamos esto usando dos ejemplos. Primero, un niño en posición absoluta sin antepasado en posición:
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
}
.child_2 {
position: absolute;
bottom: 190px;
right: 500px;
border: 8px solid purple;
}
Aquí está el resultado:
En este segundo ejemplo, el contenedor principal tiene una posición no estática:
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
position: relative;
}
.child_2 {
position: absolute;
bottom: 20px;
right: 150px;
border: 8px solid purple;
}
El niño ahora está posicionado con respecto a su contenedor:
Posicionamiento fijo CSS
Un elemento con una posición fija también se elimina del flujo normal del documento. No hay espacio creado para ese elemento en todo el diseño de la página. Se coloca en relación con el bloque contenedor inicial establecido por la ventana gráfica (excepto cuando alguno de sus antepasados tiene una propiedad de filtro, transformación o perspectiva establecida en cualquier otro valor que no sea ninguno). Las propiedades superior, izquierda, derecha e inferior decidirán la posición final del elemento.
Modifiquemos nuestro ejemplo actual agregando más niños. Anteriormente, arreglamos la altura del contenedor principal. Eliminémoslo y establezcamos flex-direction: column para que nuestro contenedor flexible sea lo suficientemente grande como para desplazarse hacia abajo y visualizar el resultado. Ahora, agregue la propiedad de posición fija al segundo hijo como se muestra a continuación:
.utility-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
/* height: 400px; */
margin: auto;
/* position: relative; */
}
.child_2 {
position: fixed;
bottom: 300px;
right: 100px;
border: 8px solid purple;
}Aquí está el resultado:
Por lo tanto, el desplazamiento no afecta en absoluto la posición del segundo niño. Su posición se fija en relación con el bloque contenedor inicial establecido por la ventana gráfica. Ocasionalmente, los elementos de desplazamiento pueden causar problemas de rendimiento y accesibilidad. Puede crear un sitio web accesible utilizando HTML semántico y CSS .
Posicionamiento adhesivo CSS
Un elemento con posicionamiento fijo posee propiedades mixtas de posicionamiento relativo y fijo. Un elemento posicionado fijo seguirá las propiedades de posicionamiento relativo hasta que cruce el umbral especificado. Después de eso, se comportará como si estuviera fijo, hasta que alcance el límite de su padre.
Puede especificar el umbral utilizando las propiedades izquierda, derecha, superior e inferior. Sin umbral, el elemento se comportará como si tuviera un posicionamiento relativo.
Establezcamos la posición del segundo niño para que se adhiera a un umbral superior:
.child_2 {
position: sticky;
top: 0px;
border: 8px solid purple;
}Aquí está el resultado:
Como puede ver, el segundo niño se comporta como los otros niños mientras se desplaza. Pero cuando alcanza el valor umbral (top: 0px), se comporta como si estuviera fijo y abandona el flujo normal de documentos. Puede hacer que una barra de navegación se adhiera al encabezado con un posicionamiento fijo.
Conclusión
La propiedad de posición CSS es una habilidad avanzada de diseño web. Se necesita algo de aprendizaje, pero todo lo que necesita hacer es jugar con diferentes valores, resultados y excepciones. Recuerde que nada puede vencer a la práctica cuando se trata de crear un diseño web impresionante. Así que sigue practicando y mejorarás. ¡Feliz codificación!