Curso de HTML | Estilos position en CSS 1

Curso de HTML
Estilos position en CSS

Curso de HTML | Estilos position en CSS 2

Curso de HTML | Estilos position en CSS

29.  
30.  
32.  
34.  
47.  
  • static: (valor por defecto) no obedece a los estilos top, left, bottom, right.
  • relative: Permite posicionar un elemento respecto de la posición dónde debería ir. Será posible utilizar los estilos top, left, bottom y right.
  • absolute: Permite la superposición.
  • fixed: Permite la superposición. Además, por mucho scroll que hagamos, el elemento no se desplazará.
  • inherit: El elemento hereda sus estilos de la capa que lo envuelve.
  • sticky: Es similar al fixed, pero con la diferencia de que al aplicar el estilo, el elemento no cae fuera de la línea de flotación. Además, podemos separar el elemento del límite superior de la pantalla y cuando hagamos scroll el elemento queda fijado (ver ejemplo).

Ejemplo de uso de sticky:

Por como esta estructurada la página, no es posible poner un ejemplo de sticky en los ejemplos interactivos, así que te dejo el siguiente ejemplo a parte:

.box{
  width: 200px;
  height: 200px;
  background-color: red;
  position: ;
  top: ;
  left: ;
  z-index:
}

Ejercicios position absolute

Ejercicio capas con absolute

Sólo una capa tendrá position: absolute, la capa rosa que inicialmente se visualiza por encima de las otras cuatro capas.

Estas cinco capas estarán dentro de una capa con position: relative para que sea posible aplicar a la capa con position:absolute los estilos top,left,bottom y right y que no se posicione respecto de los límites de la pantalla, sino respecto de los límites de la capa que la envuelve.

Ejercicio width

Hacer el ejercicio del enlace