Hay diferentes métodos y tecnologías para posicionar elementos, Bootstrap a día de hoy es la mas conocida, pero en este post voy a hablar solo de CSS puro.
Hay 5 valores para el atributo position dentro de un estilo:
- static: Es el valor por defecto. Los div se apilan uno encima de otro con salto de línea.
- relative: El contenedor div se posiciona de manera relativa a su elemento padre. Utiliza las propiedades top, bottom, left y right para cuantificar esta posición. Estas medidas pueden ir en píxeles, porcentajes, etc.
- absolute: El contenedor div se posiciona de manera absoluta a la esquina superior izquierda de la página. Utiliza las propiedades top, bottom, left y right para determinar su posición. Estas medidas también pueden tener formato de píxeles, porcentajes, etc.
- fixed: El contenedor div se posiciona de manera fija en la pantalla, aunque desplacemos el scroll seguirá manteniendo su posición fija. De nuevo utilizamos las propiedades top, bottom, left y right.
- sticky:El contenedor div se queda fijado en pantalla cuando llega a una determinada posición. Por ejemplo descendemos el scroll y a partir de un punto ya no se mueve y permanece fijo en pantalla. No funciona en Internet Explorer y en versiones antiguas de Microsoft Edge.
Toda esta combinación de capas requiere que el navegador decida que capa se muestra y cual se oculta, para ello tenemos el z-index, es la propiedad que determina el orden de "profundidad" en pantalla.
Os pongo aquí un ejemplo:
Si tienes los conceptos claros te será mucho más fácil resolver problemas complejos.
Espero que os sea de utilidad.
Espero que os sea de utilidad.
Comentarios