Solución:
Posicionamiento CSS absoluto
position: absolute;
El posicionamiento absoluto es el más fácil de entender. Empiezas con el CSS position propiedad:
position: absolute;
Esto le dice al navegador que lo que se va a colocar debe eliminarse del flujo normal del documento y se colocará en una ubicación exacta en la página. No afectará la forma en que los elementos anteriores o posteriores en el HTML se colocan en la página web, sin embargo voluntad estar sujeto al posicionamiento de sus padres a menos que lo anule.
Si desea colocar un elemento a 10 píxeles de la parte superior de la ventana del documento, debe usar el top compensar a position está ahí con absolute posicionamiento:
position: absolute;
top: 10px;
Este elemento siempre se mostrará 10px desde la parte superior de la página, independientemente del contenido que pase a través, debajo o sobre el elemento (visualmente).
Las cuatro propiedades de posicionamiento son:
toprightbottomleft
Para usarlos, debe pensar en ellos como propiedades de compensación. En otras palabras, un elemento posicionado right: 2px no se mueve bien 2px. Su lado derecho está desplazado desde el lado derecho de la ventana (o su posición que prevalece sobre el padre) por 2px. Lo mismo ocurre con los otros tres.
Posicionamiento relativo
position: relative;
El posicionamiento relativo utiliza las mismas cuatro propiedades de posicionamiento que absolute posicionamiento. Pero en lugar de basar la posición del elemento en el puerto de vista del navegador, comienza desde donde estaría el elemento si todavía estuviera en la posición normal. fluir.
Por ejemplo, si tiene tres párrafos en su página web y el tercero tiene un position: relative estilo colocado en él, su posición se desplazará según su ubicación actual, no desde los lados originales del puerto de visualización.
Párrafo 1.
Párrafo 2.
Párrafo 3.
En el ejemplo anterior, el tercer párrafo se colocará 3em desde el lado izquierdo del elemento contenedor, pero aún estará debajo de los dos primeros párrafos. Permanecería en el flujo normal del documento y solo se compensaría ligeramente. Si lo cambiaste a position: absolute;, todo lo que le siga se mostrará encima, porque ya no estará en el flujo normal del documento.
Notas:
-
el valor por defecto
widthde un elemento que está absolutamente posicionado es el ancho del contenido dentro de él, a diferencia de un elemento que está relativamente posicionado donde está predeterminadowidthes100%del espacio que puede llenar. -
Puede tener elementos que se superponen con elementos absolutamente posicionados, mientras que no puede hacer esto con elementos relativamente posicionados (de forma nativa, es decir, sin el uso de márgenes / posicionamiento negativos)
lotes extraídos de: este recurso
Tanto el posicionamiento “relativo” como el “absoluto” son realmente relativos, solo que con un marco diferente. El posicionamiento “absoluto” es relativo a la posición de otro elemento envolvente. El posicionamiento “relativo” es relativo a la posición que tendría el propio elemento sin posicionamiento.
Depende de sus necesidades y objetivos cuál utilice. La posición “relativa” es adecuada cuando desea desplazar un elemento de la posición que tendría en el flujo de elementos, por ejemplo, para hacer que algunos caracteres aparezcan en una posición de superíndice. El posicionamiento “absoluto” es adecuado para colocar un elemento en algún sistema de coordenadas establecido por otro elemento, por ejemplo, para “sobreimprimir” una imagen con algún texto.
Como especial, utilice el posicionamiento “relativo” sin desplazamiento (solo ajuste position: relative) para convertir un elemento en un marco de referencia, de modo que pueda usar el posicionamiento “absoluto” para los elementos que están dentro de él (en el marcado).
Otra cosa a tener en cuenta es que si desea que un elemento absoluto se limite a un elemento principal, debe establecer la posición del elemento principal en relativa. Eso mantendrá el elemento hijo contenido dentro del elemento padre y no será “relativo” a toda la ventana.
Escribí una publicación de blog que da un ejemplo simple que crea el siguiente efecto:
Eso tiene un div verde que está absolutamente posicionado en la parte inferior del div amarillo principal.
1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/