3.1 position: relative
El posicionamiento relativo en CSS permite a los elementos moverse respecto a su posición inicial en el flujo del documento. Al usar position: relative, el elemento mantiene su lugar en el flujo normal, pero se puede desplazar utilizando las propiedades top, right, bottom y left. Estas propiedades permiten mover el elemento en relación con su posición habitual.
Principios básicos del posicionamiento relativo
En el posicionamiento relativo (position: relative), el elemento se mueve desde su posición original en el flujo del documento. Este desplazamiento sólo afecta al propio elemento, mientras que los demás elementos permanecen en su lugar, como si el elemento no se hubiera movido. Esto permite crear efectos donde los elementos se superponen o crean márgenes visuales adicionales.
Sintaxis:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Donde:
top: desplaza al elemento hacia abajo respecto a su posición normalright: desplaza al elemento a la izquierda respecto a su posición normalbottom: desplaza al elemento hacia arriba respecto a su posición normalleft: desplaza al elemento a la derecha respecto a su posición normal<valor>: puede ser cualquier valor de longitud válido en CSS (px,%,em, etc.)
3.2 Propiedad top
La propiedad top desplaza al elemento hacia abajo respecto a su posición inicial.
Ejemplo de uso de top:
.relative-top {
position: relative;
top: 20px; /* Desplaza el elemento hacia abajo 20 píxeles */
}
Ejemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">Esto es un bloque normal</div>
<div class="box relative-top">Este bloque se desplazará hacia abajo 20px.</div>
<div class="box static-box">Esto es un bloque normal</div>
</div>
3.3 Propiedad right
La propiedad right desplaza al elemento a la izquierda respecto a su posición inicial.
Ejemplo de uso de right:
.relative-right {
position: relative;
right: 20px; /* Desplaza el elemento a la izquierda 20 píxeles */
}
Ejemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">Esto es un bloque normal</div>
<div class="box relative-right">Este bloque se desplazará a la izquierda 20px.</div>
<div class="box static-box">Esto es un bloque normal</div>
</div>
3.4 Propiedad bottom
La propiedad bottom desplaza al elemento hacia arriba respecto a su posición inicial.
Ejemplo de uso de bottom:
.relative-bottom {
position: relative;
bottom: 20px; /* Desplaza el elemento hacia arriba 20 píxeles */
}
Ejemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">Esto es un bloque normal</div>
<div class="box relative-bottom">Este bloque se desplazará hacia arriba 20px.</div>
<div class="box static-box">Esto es un bloque normal</div>
</div>
3.5 Propiedad left
La propiedad left desplaza al elemento a la derecha respecto a su posición inicial.
Ejemplo de uso de left:
.relative-left {
position: relative;
left: 20px; /* Desplaza el elemento a la derecha 20 píxeles */
}
Ejemplo de uso:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">Esto es un bloque normal</div>
<div class="box relative-left">Este bloque se desplazará a la derecha 20px.</div>
<div class="box static-box">Esto es un bloque normal</div>
</div>
3.6 Interacción con elementos adyacentes
Los elementos con position: relative permanecen en el flujo normal del documento, lo que significa que todavía ocupan el espacio que ocuparían si no estuvieran desplazados. Esto permite mover elementos sin alterar la colocación de otros elementos en la página.
Ejemplo de uso:
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Elemento 1 (desplazado hacia abajo)</div>
<div class="box box2">Elemento 2 (desplazado a la derecha)</div>
<div class="box">Elemento 3 (posición normal)</div>
</div>
Explicación del código:
-
.box1: el elemento se desplaza hacia abajo 20 píxeles, pero su lugar en el flujo normal permanece, lo que significa que otros elementos se colocarán en relación con su posición original -
.box2: el elemento se desplaza a la derecha 20 píxeles, pero su lugar en el flujo normal permanece
GO TO FULL VERSION