Cómo trabajar con la propiedad `position` en CSS
El posicionamiento es lo que nos hace determinar dónde aparecen los elementos en la pantalla y cómo aparecen.
Puedes mover elementos y colocarlos exactamente donde quieras.
En este post también veré cómo cambian las cosas en una página en función de cómo los elementos position
interactúan entre sí.
Tenemos una propiedad CSS principal: position
.
Puede tener esos 5 valores:
static
relative
absolute
fixed
sticky
Posicionamiento estático
Este es el valor predeterminado de un elemento. Los elementos con posición estática se muestran en el flujo normal de la página.
Posicionamiento relativo
Si establece position: relative
un elemento, ahora puede posicionarlo con un desplazamiento, utilizando las propiedades
- arriba
- bien
- abajo
- izquierda
que se denominan propiedades de desplazamiento y aceptan un valor de longitud o un porcentaje.
Tome este ejemplo que hice en Codepen . Creo un contenedor principal, un contenedor secundario y un cuadro interno con algo de texto:
div div div pTest/p /div /div/div
con algo de CSS para dar algunos colores y relleno, pero no afecta el posicionamiento:
.parent { background-color: #af47ff; padding: 30px; width: 300px;}.child { background-color: #ff4797; padding: 30px;}.box { background-color: #f3ff47; padding: 30px; border: 2px dotted #333; font-family: courier; text-align: center; font-size: 2rem;}
Aquí está el resultado:
Puedes intentar agregar cualquiera de las propiedades que mencioné antes ( top
, right
, bottom
, left
) a .box
, y no sucederá nada. La posición es static
.
Ahora bien, si establecemos position: relative
el cuadro, al principio aparentemente no cambia nada, pero ahora el elemento puede moverse utilizando las propiedades top
, right
, bottom
, left
y ahora puedes modificar su posición relativa al elemento que lo contiene.
Por ejemplo:
.box { /* ... */ position: relative; top: -60px;}
Un valor negativo top
hará que la caja se mueva hacia arriba en relación con su contenedor.
O
.box { /* ... */ position: relative; top: -60px; left: 180px;}
Observe cómo el espacio que ocupa la caja permanece conservado en el contenedor, como si aún estuviera en su lugar.
Otra propiedad que funcionará ahora es z-index
la de modificar la posición del eje z. Hablaremos de ello más adelante.
Posicionamiento absoluto
Al establecer una configuración position: absolute
en un elemento, este se eliminará del flujo del documento y ya no seguirá el flujo de posicionamiento de la página original. SeriesLista.com - Programas de TV, Series, Guía de episodios.
¿Recuerdas que en el posicionamiento relativo notamos que el espacio originalmente ocupado por un elemento se conservaba incluso si se movía?
Con posicionamiento absoluto, tan pronto como establecemos position: absolute
, .box
su espacio original ahora se colapsa, y solo el origen (coordenadas x, y) permanece igual.
.box { /* ... */ position: absolute;}
Ahora podemos mover el cuadro como queramos, usando las propiedades top
, right
, bottom
, :left
.box { /* ... */ position: absolute; top: 0px; left: 0px;}
o
.box { /* ... */ position: absolute; top: 140px; left: 50px;}
Las coordenadas son relativas al contenedor más cercano que no es static
.
Esto significa que si añadimos position: relative
al .child
elemento, y ponemos top
y left
a 0, el cuadro no se posicionará en el margen superior izquierdo de la ventana , sino que se posicionará en las coordenadas 0, 0 de .child
:
.child { /* ... */ position: relative;}.box { /* ... */ position: absolute; top: 0px; left: 0px;}
Esto es lo que sucede si .child
es estático (predeterminado):
.child { /* ... */ position: static;}.box { /* ... */ position: absolute; top: 0px; left: 0px;}
Al igual que para el posicionamiento relativo, puede utilizar z-index
para alterar la ubicación del eje z.
Posicionamiento fijo
Al igual que con el posicionamiento absoluto, cuando se asigna un elemento, position: fixed
se elimina del flujo de la página.
La diferencia con el posicionamiento absoluto es la siguiente: los elementos ahora siempre se posicionan en relación con la ventana, en lugar del primer contenedor no estático.
.box { /* ... */ position: fixed;}
.box { /* ... */ position: fixed; top: 0; left: 0;}
Otra gran diferencia es que los elementos no se ven afectados por el desplazamiento. Una vez que colocas un elemento fijo en algún lugar, el desplazamiento por la página no lo elimina de la parte visible de la misma.
Posicionamiento pegajoso
Si bien los valores anteriores han existido durante mucho tiempo, este se introdujo recientemente y aún no cuenta con soporte ( consulte caniuse.com ).
El componente UITableView iOS es lo que me viene a la mente cuando pienso en position: sticky
. ¿Sabes cuando te desplazas por la lista de contactos y la primera letra está pegada en la parte superior, para que sepas que estás viendo los contactos de esa letra en particular?
Usamos JavaScript para emular eso, pero este es el enfoque adoptado por CSS para permitirlo de forma nativa.
Tips de CSS
Tal vez te puede interesar:
- Manejo de errores CSS
- Importar un archivo CSS usando @import
- Bordes CSS
- La propiedad flotante CSS y su limpieza
La propiedad de posición CSS
Posicionamiento estáticoPosicionamiento relativoPosicionamiento absolutoPosicionamiento fijoPosicionamiento pegajoso
programar
es
https://aprendeprogramando.es/static/images/programar-la-propiedad-de-posicion-css-1999-0.jpg
2024-10-31
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente