4.1 absolute positioning
El posicionamiento absoluto (absolute positioning) en CSS te permite controlar con precisión la ubicación de los elementos en una página web. Cuando utilizas el posicionamiento absoluto, el elemento se elimina del flujo normal del documento y se coloca en relación con el ancestro posicionado más cercano. Si no existe tal ancestro, el elemento se posicionará en relación con el contenedor inicial (normalmente es <html> o <body>).
Características principales del posicionamiento absoluto:
- Eliminación del flujo de documentos: los elementos posicionados absolutamente no afectan a otros elementos y no se tienen en cuenta al calcular el tamaño de los elementos padre.
- Posicionamiento relativo: los elementos se colocan en relación con el ancestro más cercano que tenga un posicionamiento relativo (
position: relative), absoluto (position: absolute), fijo (position: fixed) o pegajoso (position: sticky). - Uso de coordenadas: se utilizan las propiedades
top,right,bottomyleftpara establecer la posición exacta del elemento.
Ejemplo básico de posicionamiento absoluto
Veamos un ejemplo sencillo de posicionamiento absoluto de un elemento:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
En este ejemplo, el elemento .box se posiciona en relación con su contenedor padre .container, que tiene position: relative;.
4.2 Creación de superposiciones (overlays)
El posicionamiento absoluto se utiliza a menudo para crear superposiciones, como ventanas modales, tooltips y lightboxes.
Ejemplo de posicionamiento absoluto:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Contenido del Modal</p>
</div>
</div>
</div>
4.3 Diseños precisos y componentes de interfaz
El posicionamiento absoluto es útil para crear diseños precisos, como controles en reproductores multimedia, controles personalizados y barras de herramientas.
Ejemplo de posicionamiento absoluto:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Reproducir</div>
<div class="volume-control">Volumen</div>
</div>
4.4 Creación de diseños complejos
El posicionamiento absoluto permite crear diseños complejos, como paneles de información y elementos interactivos.
Ejemplo de posicionamiento absoluto:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Barra lateral</div>
<div class="main-content">Contenido principal</div>
</div>
GO TO FULL VERSION