Pocisionamiento
La propiedad position permite posicionar los elementos.
Flujo de renderizado:
Por norma general los elementos se dibujan de izquierda a derecha y de arriba abajo. El punto 0,0 de los elementos, por norma general, es la esquina superior izquierda.
Espacio reservado:
Es el espacio que tiene un elemento asignado en el navegador.
Elemento posicionado:
Esto significa que el elemento tiene la propiedad position con un valor distinto de "static", que es el valor que tiene esta propiedad por defecto.
Stackin context:
Contexto de apilamiento. Es el orden en el que se apilarán las cajas que se superponen, dentro del mismo contenedor.
El orden del stacking context es: (de delante a atrás):
- Elementos posicionados con un z-index de 1 ó más.
- Elementos posicionados sin z-index declarado (o z-index:auto).
- Elementos no posicionados.
- Elementos con z-index negativo.
Propiedades:
- top:
- El elemento se moverá desde la parte superior la distancia que se le haya indicado.
- right:
- El elemento se moverá desde la parte derecha la distancia que se le haya indicado.
- bottom:
- El elemento se moverá desde la parte inferior la distancia que se le haya indicado.
- left:
- El elemento se moverá desde la parte izquierda la distancia que se le haya indicado.
- z-index:
- Permite mover el elemento en el contexto de apilamiento (eje z). Es la propiedad que permite ordenar los elementos superpuestos para controlar cual se coloca por delante y cual por detrás.
Si a un elemento se le declara la propiedad top y/o left, las propiedades bottom y/o right no funcionarán.
Z-index:
- sin z-index es el orden del html el que prevalece.
- Con z-index el numero mayor es el que prevalece.
- No utilizar números consecutivos.
- Un elemento padre jamas se colocará por delante del hijo, pero si es posible poner al hijo detrás del padre con valores de z-index negativos y es importante que el padre no tenga z-index.
Ejemplo:
Sin z-index:
Con z-index:
Valores para position:
Static:
Es el valor que tiene por defecto un elemento, con este valor el elemento NO ESTÁ POSICIONADO y por lo cual no puede moverse.
Relative:
El elemento mantendrá su posición y medidas en el flujo de renderizado y mantendrá su espacio reservado. Si se mueve lo hará usando su posición original en el html como punto de referencia (esquina superior izquierda).
Ejemplo 1:
Position static:
Position relative:
Ejemplo 2:
Position static:
Position relative:
En este ejemplo se aplica el contexto de apilamiento, ya que la caja 8 ocupa parte del espacio de la caja 7.
Absolute:
El elemento perderá sus medidas y su espacio reservado. Si se mueve usará el elemento posicionado contenedor como referencia. Si no tiene ninguno, usará el elemento html de referencia.
Si se utliza position absolute en un elemento en linea, este pasará a ser de bloque, por lo que no es necesario utilizar display block.
Ejemplo 1:
Position static:
Position absolute:
Ejemplo 2:
Position static:
Position absolute:
En este ejemplo, al ser position absolute, la caja 11 pierde su espacio reservado por lo que ahora lo esta ocupando la caja 12.
Fixed:
El elemento perderá sus medidas y su espacio reservado. Si se mueve usará el elemento html de referencia, y además se quedará fijo en esa posición aunque se haga scroll.
Ejemplo Fixed
Sticky:
Es una mezcla de position relative y "fixed". Con este tipo de posicionamiento los valores top, left, bottom y right no sirven para mover el elemento, si no para indicarle en qué punto pasará a tener un comportamiento de posicionamiento similar a fixed, hasta llegar a ese punto se comportará como si no tuviera posicionamiento, aunque sí contará como posicionado si se necesita colocar otro elemento respecto a él (absolute).
Ejemplo Sticky
Float:
La propiedad float ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido de su flujo normal de renderizado, aunque aún sigue siendo parte del flujo (a diferencia del posicionamiento absoluto). Admite los siguientes valores:
- left:
- El elemento flota a la izquierda de su bloque contenedor.
- right:
- El elemento flota a la derecha de su bloque contenedor.
- none:
- El elemento no flota.
Clear:
La propiedad clear se encarga de impedir elementos flotantes en la zona indicada, a la izquierda del elemento (left), a la derecha (right) o en ambos lados (both).
Ejemplo:
Float: left
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci corporis aut fugit libero doloribus aliquam totam eius maxime explicabo voluptas, nobis iusto nostrum reprehenderit illo unde quae consectetur tenetur magni! Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum sapiente, odit neque porro odio quas nesciunt atque quaerat voluptates veritatis aperiam sunt delectus doloribus dicta, dolore nobis praesentium, laborum exercitationem?
Float: right
Div Clear Left
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ipsa praesentium dolore pariatur commodi vel quasi aliquam obcaecati maxime nobis. Itaque, cumque blanditiis odio explicabo molestias aliquam repellat culpa veritatis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi praesentium aliquid eos, dolor nihil minus beatae nobis similique maiores temporibus repellendus exercitationem non molestias deleniti pariatur voluptatem, rerum deserunt vitae!