Posicionamiento en CSS

Comprender cómo funciona la propiedad de posición en CSS puede ser bastante confuso para un principiante.

Recuerdo haber probado suerte jugando a la ruleta CSS, usando diferentes combinaciones de propiedades de posición hasta que obtuve prácticamente lo que quería. Aprox . También recuerdo los tiempos en los que todavía tenía mala suerte y, como resultado, creé un completo desastre.

Pero resulta que Lady Fortune aprueba la preparación, así que antes de que pruebes suerte la próxima vez, este artículo te servirá como un as bajo la manga.

El posicionamiento CSS simplificado se describirá a continuación.

Si eres demasiado perezoso para leer el artículo completo, entonces usa la hoja de trucos al final del artículo.

Hay dos tipos de posicionamiento.

Posicionamiento de tipo estático (static) y relativo (relative) .

El posicionamiento estático contiene sólo un valor position: static. Está configurado de forma predeterminada, por lo que rara vez lo verá en las opciones.

El posicionamiento relativo contiene los siguientes valores: position: relative, position: absolutey position: fixed. Estos tipos de posicionamiento interactúan entre sí y le permiten mover elementos de formas interesantes.

Posicionamiento estático

Vamos a deshacernos de este aburrimiento temprano. Si bien rara vez ve una declaración de posición estática en el código, debemos comenzar a aprender sobre el posicionamiento desde allí.

.ourBox {
  position: static;
}

El posicionamiento estático se establece de forma predeterminada para cada elemento.

Posicionamiento relativo

Con el posicionamiento relativo, las cosas se vuelven mucho más interesantes.

Los valores de los que disponemos son: relative, absolutey fixed. Se denominan relativos porque permiten que los elementos se muevan en relación con ellos mismos, sus padres o toda la ventana gráfica.

Cada posicionamiento de tipo relativo puede:

• Para ser desplazado del flujo de posicionamiento normal utilizando propiedades de desplazamiento como superior, derecha, inferior e izquierda.
• Cree condiciones de posicionamiento relativas que permitan que los elementos secundarios se posicionen position: absolute en relación con la posición de sus padres .

Echemos un vistazo más de cerca a cada uno de los tres posicionamientos relativos.

Valor relativo

Puede que hayas visto esto antes. El código se ve así:

.ourBox {
  position: relative;
}

Los elementos con una propiedad position: relativese pueden cambiar de su posición normal en la ruta, pero aún ocupan el mismo espacio. Esto se logra mediante el uso de las propiedades de desplazamiento del mismo elemento, con respecto a sí mismo .

Traigamos claridad. Cuando utiliza las propiedades de desplazamiento en un elemento con la propiedad position: relative, el lugar que ocupa en el documento no se mueve.

Mira el ejemplo de abajo.

.ourBox {
  position: relative;
  top: 20px;
  left: 20px;
}

Podemos ver que la parte superior de nuestro elemento se ha movido 20px desde donde estaba en el flujo normal . Lo mismo se hizo para el lado izquierdo.

Tenga en cuenta que la posición de la caja en ambos lados no ha cambiado. Recuerda que cuando mueves un elemento con la propiedad position: relative, el espacio que ocupa no se mueve, por lo que no tiene efecto sobre los elementos que lo rodean.

Imagina que nuestra caja tiene un alma que se puede mover a cualquier lugar, pero siempre en relación a donde estaba originalmente.

Es importante tener en cuenta que cuando aplica una propiedad position: relativea un elemento, lo más probable es que no desee aplicarle propiedades de compensación. Después de todo, algunos elementos quieren quedarse donde están.

Valor absoluto

Consolidación.

La propiedad position: absolutebásicamente hace lo mismo que la propiedad position: relative, pero con dos diferencias clave:

• El elemento se toma del flujo normal y no ocupa espacio.
• El elemento se coloca en relación con el elemento principal más cercano con la propiedad relativa.

Echemos un vistazo:

.ourBoxesParent {
  position: relative;
}
.ourBox {
  position: absolute;
  top: 0;
  left: 0;
}

Hemos creado un contenedor con una propiedad position: relativepara nuestras tres cajas. También cambiamos nuestra propiedad box a position: absolute. Observe cómo el espacio que ocupábamos anteriormente ahora se ha reducido y los dos cuadros grises ahora se muestran uno al lado del otro.

position: absoluteindica que desea sacar su elemento del flujo normal, limpiar el espacio que ocupa y moverlo en relación con el elemento principal más cercano con la propiedad relativa.

Valor fijo

Ahora que conocemos la propiedad position: absolute, será más fácil para nosotros tratar con ella fixed.

fixedes lo mismo que absolute, pero con una diferencia clave:

• El elemento se coloca en relación con la ventana gráfica .

.ourBox {
  position: fixed;  
  top: 0;
  left: 0;
}

Cuando aplicamos la posición: propiedad fija, nuestro cuadro se movió a la esquina superior izquierda de la ventana gráfica, lo que significa que incluso si la página se desplaza, nuestro pequeño cuadro permanecerá en su lugar. Cuando aplicamos la propiedad position: fixed, nuestro cuadro se movió a la esquina superior izquierda de la ventana gráfica.

Conclusión

Para una referencia rápida, recapitulemos lo que hemos aprendido.

position: static

• La propiedad predeterminada para todos los elementos.
• Organiza los elementos en un flujo regular.

position: relative

• Se puede compensar usando las propiedades: superior , derecha , inferior e izquierda .
• Se mueve con respecto a sí mismo .
• Crea condiciones de posicionamiento relativo para elementos secundarios.

position: absolute

• Se puede compensar usando las propiedades: superior , derecha , inferior e izquierda .
• Desplazamiento relativo al elemento relativo principal más cercano .
• Crea condiciones de posicionamiento relativo para elementos secundarios.

position: fixed

• Se puede compensar usando las propiedades: superior , derecha , inferior e izquierda .
• Desplazamiento relativo a la ventana gráfica .
• Crea condiciones de posicionamiento relativo para elementos secundarios.