CSS

Posicionamiento
o Posicionamiento
❑ Relativo
❑ Absoluto
❑ Fijo
o Propiedades
❑ Top
❑ Right
❑ Botton
❑ Left
 Posicionamiento Relativo
Position: relative

Permite trasladar un elemento desde su posición original a una nueva posición,

tomando como referente sus propios costados.
Sigue ocupando su espacio y no modifica el comportamiento de los contenedores
a su alrededor.

.caja1 {
position: relative;
top: 50px;
left: 100px;
}
Posicionamiento Relativo

position:relative
2 2 left: 50px;
top: 100px;

3 3
 Posicionamiento Absoluto
Position: absolute

Permite trasladar un elemento desde su posición original a una nueva posición,

tomando como referente al body.
A menos que haya otro contenedor que haga de padre, en ese caso se comporta en
relación a este último.

.caja2 {
position: absolute;
right: 10px;
bottom: 10px;
}
 Posicionamieto Absoluto

1
Body

3
 Posicionamieto Absoluto

Body

2
position:absolute
right: 10px; 1
3 bottom: 10px;
Posicionamieto Absoluto Dentro
de un contenedor

3
Posicionamieto Absoluto Dentro
de un contenedor

position:absolute
right: 10px; 1
bottom: 10px;
 Posicionamieto Absoluto Dentro
de un contenedor

2 position:absolute
right: 10px;
bottom: 10px;

Aquí el Padre tiene la propiedad position:relative;

Por Eso puedo posicionarlo de manera absoluta dentro de un contenedor
 Posicionamiento Fijo
Position: fixed

Permite trasladar un elemento desde su posición original a una nueva posición,

tomando como referente al body SIEMPRE.
PEERO este elemento son se moverá al hacer scroll.

.caja3 {
position: fixed;
}
 Posicionamiento Z-Index
Z-index: n;

Permite cambiar el orden de las “capas” dentro de un documento HTML.

Solo funciona si el elemento posee posicionamiento relativo, absoluto o fijo

.caja1 {
position: relative;
.caja2 {
z-index: 10;
position: relative;
left: 100px;
z-index: 5;
top: 100px;
left: 150px;
}
bottom: 150px;
}
 Posicionamiento Z-Index

HTML Z-index frontal Z-index lateral

normal
Z-index:10;
1
1

Pantalla
Z-index: 5;
2

3 3 Z-index:0;