position: relative le dice al navegador que coloque el objeto en el lugar donde aparecería naturalmente en el flujo de documentos.
Por ejemplo, imagina que este es tu html:
- ¿Hay alguna manera de que pueda subprocesar un documento HTML? Me gustaría que se procesara lo más rápido posible.
- ¿Hay alguna empresa de desarrollo web en la India que se especialice en trabajar con nuevas empresas / emprendedores que desarrollen sus ideas en un producto web?
- ¿Cómo se crea el contenido del mapa con OGC?
- ¿Cuáles son los elementos clave de un sitio web bien diseñado?
- ¿Por qué una empresa contrataría a un desarrollador front-end a tiempo completo?
1. Algún contenido.
2. Un poco más de contenido.
3. Aún más contenido.
Este es tu css:
.container {position: relative;}
.normal {posición: relativa;}
.top {position: relative;}
En el navegador verías:
1. Algunos contenidos.
2. Un poco más de contenido.
3. Aún más contenido.
Estos están en el mismo orden en que los colocó en el documento.
Ahora, si cambiaste el CSS de arriba a esto:
.top {posición: absoluta; arriba: 0px;}
verías algo como
3. Aún más contenido.
1. Algunos contenidos.
2. Un poco más de contenido.
Esto cambiaría el orden al forzar .top a la parte superior del contenedor. También es probable que se superponga con los otros objetos, por lo que tendría que hacer ajustes adicionales.
https://developer.mozilla.org/en… da algunos buenos ejemplos.
