Hablemos de la position propiedad. Sé que los principiantes sienten curiosidad por esto. Aquí hay una pregunta que recibí recientemente:
Soy bastante nuevo en el diseño web y no he dominado las diferencias en el posicionamiento de los elementos. Yo se que hay absolute, fixed, y relative. ¿Hay otros? Además, ¿difieren en gran medida? ¿Y cuándo debería usar cuál?
Respuesta corta
Hay dos más: static, que es el predeterminado, y sticky, que es toda una fantasía. sí, ¡todos estos difieren en gran medida! Cada uno de ellos es increíblemente útil y, por supuesto, el que debe usar depende del resultado deseado.
Respuesta más larga
Un concepto importante que hay que entender primero es que cada elemento de una página web es un bloque. Literalmente un rectángulo de píxeles. Esto es fácil de entender cuando configura el elemento en display: block; o si ese elemento es a nivel de bloque por defecto como un <div>. Esto significa que puede establecer un width y un height y ese elemento respetará eso. Pero elementos que son display: inline;, como un <span> por defecto, también son rectángulos, simplemente fluyen hacia la página de manera diferente, alineándose horizontalmente como pueden.
Ahora que está imaginando cada elemento de la página como un bloque de píxeles, podemos hablar sobre cómo se usa el posicionamiento para colocar los bloques de píxeles exactamente donde desea que vayan.
.el {
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
position: inherit;
}static
Este es el defecto para cada elemento de la página. Los diferentes elementos no tienen diferentes valores predeterminados para el posicionamiento, todos comienzan como static. La estática no significa mucho; simplemente significa que el elemento fluirá hacia la página como lo haría normalmente. La única razón por la que alguna vez establecería un elemento en position: static; es eliminar a la fuerza algún posicionamiento que se aplicó a un elemento fuera de su control. Esto es bastante raro, ya que el posicionamiento no se produce en cascada.
relative
Este tipo de posicionamiento es probablemente el más confuso y mal utilizado. Lo que realmente significa es “relativo a sí mismo”. Si pones position: relative; en un elemento pero no en otros atributos de posicionamiento (top, left, bottom o right), no tendrá ningún efecto en su posicionamiento, será exactamente como sería si lo dejara como position: static; Pero si le da algún otro atributo de posicionamiento, digamos, top: 10px;, cambiará su posición 10 píxeles hacia abajo de donde estaría normalmente. Estoy seguro de que puedes imaginar que la capacidad de cambiar un elemento en función de su posición habitual es bastante útil. Me encuentro usando esto para alinear elementos de formulario muchas veces que tienen una tendencia a no querer alinearse como yo quiero.
Hay otras dos cosas que suceden cuando configura position: relative; en un elemento que debe conocer. Uno es que introduce la capacidad de usar z-index en ese elemento, que no funciona con elementos posicionados estáticamente. Incluso si no establece un z-index valor, este elemento ahora aparecerá en la parte superior de cualquier otro elemento posicionado estáticamente. No puedes combatirlo estableciendo un nivel más alto. z-index valor en un elemento posicionado estáticamente.
La otra cosa que pasa es limita el alcance de los elementos secundarios absolutamente posicionados. Cualquier elemento que sea hijo del elemento relativamente posicionado puede colocarse absolutamente dentro de ese bloque. Esto trae algunas oportunidades poderosas de las que hablo aquí.
absolute
Este es un tipo de posicionamiento muy poderoso que le permite colocar literalmente cualquier elemento de la página exactamente donde lo desee. Usas los atributos de posicionamiento top, left, bottom, y right para establecer la ubicación. Recuerde que estos valores serán relativos al siguiente elemento padre con posicionamiento relativo (o absoluto). Si no existe tal padre, se volverá por defecto hasta el <html> elemento en sí, lo que significa que se colocará en relación con la página en sí.
La compensación (y lo más importante a recordar) sobre el posicionamiento absoluto es que estos elementos son eliminado del flujo de elementos en la página. Un elemento con este tipo de posicionamiento no se ve afectado por otros elementos y no afecta a otros elementos. Esto es algo serio a tener en cuenta cada vez que utilice el posicionamiento absoluto. Su uso excesivo o inadecuado puede limitar la flexibilidad de su sitio.
fixed
A fixed El elemento de posición se coloca en relación con la ventana gráfica o la propia ventana del navegador. La ventana gráfica no cambia cuando se desplaza la ventana, por lo que un elemento de posición fija permanecerá justo donde está cuando se desplaza la página.
Esto podría usarse para algo como una barra de navegación que desea que permanezca visible en todo momento, independientemente de la posición de desplazamiento de las páginas. La preocupación con el posicionamiento fijo es que puede causar situaciones en las que el elemento fijo se superpone al contenido de manera que sea inaccesible. El truco es tener suficiente espacio para evitar eso y trucos como este.
sticky
¡El posicionamiento fijo es realmente único! A sticky El elemento simplemente se sentará allí como un elemento estático, pero a medida que se desplaza más allá de él, si su elemento principal tiene espacio (generalmente: altura adicional), el elemento adhesivo se comportará como si fuera fixed hasta que ese elemento padre se quede sin espacio. Suena extraño con palabras como esa, pero es fácil ver lo que está sucediendo en una demostración.
Conceptos relacionados
- Diseño como flotador, caja flexible y cuadrícula.
- El modelo de caja