Integrantes:

Fabricio Oñate
Milton Jara

Positioning CSS
Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos
muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.
Posiciones en CSS

 STATIC
 RELATIVE
 ABSOLUTE
 POSITION
FIXED
Position Static
No se considera posicionado porque todos los elementos en
su condición básica o inicial se encuentran en una posición
estática sin necesidad de que se lo indique.
Position Relative
Se posiciona desde su punto de origen. corresponde al
posicionamiento relativo. El desplazamiento de la caja se
controla con las propiedades top, right, bottom y left.
Position Absolute
Se posiciona de acuerdo a su ancestro mas cercano que este
posicionado, ya que el origen de coordenadas del
desplazamiento depende del posicionamiento de su elemento
contenedor.
Position Fixed
Se va a posicionar de acuerdo al grupo o a la ventana. Se
queda pegado, al igual que absoluto su ancho va a ser de
acuerdo al contenido que tiene.
Stiky: Pegajoso se usan para los menus.
Z Index: Ordena los elementos por capas.
Cuando un elemento es
posicionado adquiere 5
propiedades

Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de

su posición original o respecto de otro origen de coordenadas. CSS define estas
propiedades.

 Top:La propiedad top permite desplazar un elemento respecto

a su posición original tomando como referencia el borde
superior del elemento.

 Bottom: La propiedad bottom permite desplazar un elemento

respecto a su posición original tomando como referencia el
borde inferior del elemento.
 Cuando un elemento es
posicionado adquiere 5
propiedades

 Rigth: La propiedad right permite desplazar un elemento

respecto a su posición original tomando como referencia el
borde derecho del elemento.

 Left: La propiedad left permite desplazar un elemento

respecto a su posición original tomando como referencia el
borde izquierdo del elemento.

 z-index: La propiedad CSS z-index indica el orden de un

elemento posicionado y sus descendientes. Cuando varios
elementos se superponen, los elementos con mayor valor z-
index cubren aquellos con menor valor
EJEMPLO POSITION
CSS
MUCHAS
GRACIAS POR SU
ATENCIÓN