Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Distintos tipos de position

Hoy os voy a explicar las diferencias entre los distintos tipos de posiciones del flujo de elementos (static, relative, absolute y fixed), este es un tema un poco más difícil de entender cuando se empiezan a mezclar distintos tipos de posiciones, pero os contaré como usarlas correctamente y veréis lo útiles que pueden llegar a ser.

Antes de entrar en la teoría os muestro un pequeño ejemplo, en el que debemos de imaginar que el contenedor (con el fondo gris oscuro) es la ventana y a partir de hay se inician las coordenadas de las posiciones que toman de referencia otro elemento (esto lo entenderéis más abajo), para que un elemento sea el inicio de las coordenadas de otro no debe tener la posición static, ya que es la que hace referencia al flujo normal de los elementos.
Los dos cuadrados grandes claros tienen distinto tipo de posición, y los tres cuadros de cada color tienen posición absolute, y según la posición del elemento que las contiene actúan de una forma u otra.

position: static

position: relative

Como podemos ver en el ejemplo aún siendo idénticos los cuadros de colores según el tipo de posición del contenedor (static para el primero y relative para el segundo) varía la posición de de estos elementos.
Estas son las características de las posiciones:

Static: es el parámetro por defecto, sigue el flujo normal de elementos colocándose uno detrás del otro.
Absolute: un elemento con este tipo de posición pierde el flujo que tienen los elementos y pasa a ser independiente, estableciendo su posición a partir de parámetros que fijan las coordenadas (top, right, bottom y left).
Relative: con este tipo de posición no se pierde el flujo de HTML, pero se permite usar coordenadas con ello (podemos establecer left, top...), al no perder el flujo las modificaciones de su posición natural afectarán desde el lugar de origen (contando padding y margin).
Fixed: este tipo de posición es idéntico al absolute, pero la diferencia es que se queda fijo en la pantalla, evitando el scroll.

Combinar posiciones

El código del primer ejemplo es el siguiente, añadiré el CSS en el parámetro style para no hacerlo demasiado extenso (solo pondré lo relativo a la posición, no lo estético):


						
								<div style="position:relative">	<!-- Si no fuese "relative" tomarían de referencia la página entera -->
							
									<div style="position:static">
								
										<div style="left:-15px; top:40px;"> 1 </div>
										<div style="left:50px; bottom:5px;"> 2 </div>
										<div style="right:5px; top:5px;"> 3 </div>
								
									</div>
									<div style="position:relative">
								
										<div style="left:-15px; top:40px;"> 1 </div>
										<div style="left:50px; bottom:5px;"> 2 </div>
										<div style="right:5px; top:5px;"> 3 </div>
								
									</div>
							
								</div>

Como hemos visto anteriormente según el tipo de posición puede un elemento seguir o no el flujo, y en el caso de no seguir el flujo, como con las posiciones absolute (como en el ejemplo) y fixed, pueden tomar como principio de la coordenada un elemento que no sea estático (relative u otro absolute o fixed) y si no esta dentro de ninguno toma como referencia la esquina superior izquierda de la página.
Voy a poner el ejemplo de arriba con fixed (que a diferencia de absolute se queda fijo en la posición sin hacer caso al scroll), es decir, se quedará pegado en la pantalla y no se moverá.
Nota: si estuviese libremente el ejemplo estorbaría en todo momento, por eso solo se visualiza al pasar por encima.

Pasa por encima.

Comentarios