Posicionamiento relativo de elementos en CSS
El posicionamiento relativo se establece con
el valor relative para la propiedad
position. Este posicionamiento permite
desplazar elementos respecto a su posición actual
en una magnitud determinada. Al mismo tiempo,
el resto de elementos de la página "verán"
al elemento en su posición original.
Es decir, con este tipo de posicionamiento el elemento
no sale del flujo normal.
Los desplazamientos desde la posición actual se establecen con las propiedades
top, right, bottom y
left.
Ejemplo
Para empezar, creemos dos bloques sin posicionamiento:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Ejemplo
Ahora agreguemos relative al primer bloque.
Por ahora no cambiará nada, ya que
no hemos especificado el desplazamiento del bloque:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Ejemplo
Ahora desplacemos nuestro bloque 30px
desde la parte superior, asignándole la propiedad top.
Al mismo tiempo, el resto de elementos se comportarán
como si nuestro bloque permaneciera en el lugar
donde estaba originalmente:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Ejemplo
Desplacemos también nuestro bloque 40px
desde la izquierda, asignándole la propiedad left:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Ejemplo
Los valores negativos de las propiedades top, right,
bottom y left desplazan en la dirección
opuesta. Por ejemplo, un valor positivo de
top desplaza hacia abajo, y uno negativo - hacia arriba.
Desplacemos nuestro segundo bloque 40px
hacia arriba, asignándole un valor negativo
para la propiedad top:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -40px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Tareas prácticas
Se dan los siguientes bloques:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#elem1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #FF8888;
}
#elem2 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #7E89EB;
}
#elem3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #4DEE99;
}
:
Desplace estos bloques usando posicionamiento relativo de la siguiente manera:
