Para definir cuando usar position:absolute
y cuando position:relative
:
Cuando queremos que el elemento NO dependa del flujo natural de los otros elementos usamos absolute
y este se posiciona con coordenadas top
y left
. siempre inicia en la esquina superior izquierda de su contenedor.
Para elementos con un posicionamiento relativo
, el origen de sus coordenadas no es la esquina superior izquierda del elemento contenedor, sino la posición que ocuparían naturalmente, de no estar condicionados o posicionados con top
o left
.
EJEMPLOS:
Cuando usa position:relative
y lo posiciona con margin
el resultado es que afectara a los elementos de orden natural, note como con el margen del .logo1
no solo se desplaza el mismo, sino que tambien desplaza al siguiente elemento .logo2
:
#normal{
border: 5px solid black;
}
#normal .logo0{
width:100px;
border: 2px solid yellow
}
#normal .logo1{
width:100px;
position: relative;
border: 2px solid red;
margin-left: 30px; //posicion con margen
}
#normal .logo2 {
width:100px;
border: 2px solid blue;
}
<div id="normal">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo0">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo1">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>
Cuando usa position:relative
y lo posiciona con top
y/o left
el resultado es que solo se desplazara el mismo elemento .logo1
a partir de su posición natural, sin afectar los otros elementos.
#normal {
border: 5px solid black;
}
#normal .logo0 {
width: 100px;
border: 2px solid yellow
}
#normal .logo1 {
width: 100px;
position: relative;
border: 2px solid red;
left: 30px; /*posicionamiento con left y right*/
top: 10px;
}
#normal .logo2 {
width: 100px;
border: 2px solid blue;
}
<div id="normal">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo0">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo1">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>
Cuando usa position:absolute
y lo posiciona con top
y/o left
el resultado es que solo se desplazara el mismo elemento .logo1
a partir de la esquina superior izquierda de su contenedor #normal
, sin tener en cuenta los demas elementos de orden natural.
#normal {
border: 5px solid black;
}
#normal .logo0 {
width: 100px;
border: 2px solid yellow
}
#normal .logo1 {
width: 100px;
position: absolute;
border: 2px solid red;
left: 70px;
top: 50px;
}
#normal .logo2 {
width: 100px;
border: 2px solid blue;
}
<div id="normal">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo0">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo1">
<img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>
position: absolute
del estilo.logo img
. Es por eso que la segunda imagen también está cogiendo los estilosright
ytop
.