La propiedad de posición CSS

 

 

 

La propiedad de posicion css 1

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 positioninteractú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: relativeun 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: relativeel cuadro, al principio aparentemente no cambia nada, pero ahora el elemento puede moverse utilizando las propiedades top, right, bottom, lefty ahora puedes modificar su posición relativa al elemento que lo contiene.

Por ejemplo:

.box { /* ... */ position: relative; top: -60px;}

Un valor negativo tophará 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-indexla de modificar la posición del eje z. Hablaremos de ello más adelante.

Posicionamiento absoluto

Al establecer una configuración position: absoluteen 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, .boxsu 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: relativeal .childelemento, y ponemos topy lefta 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 .childes estático (predeterminado):

.child { /* ... */ position: static;}.box { /* ... */ position: absolute; top: 0px; left: 0px;}

Al igual que para el posicionamiento relativo, puede utilizar z-indexpara alterar la ubicación del eje z.

Posicionamiento fijo

Al igual que con el posicionamiento absoluto, cuando se asigna un elemento, position: fixedse 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:

  1. Manejo de errores CSS
  2. Importar un archivo CSS usando @import
  3. Bordes CSS
  4. 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

 

La propiedad de posicion css 1
La propiedad de posicion css 1

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

 

 

Update cookies preferences