Posicionamiento (static, relative, absolute, fixed, sticky)
Domina los cinco modos de posicionamiento con position en CSS: el flujo normal (static), referencias relativas, extracción absoluta, elementos fijos en pantalla y cabeceras sticky.
Los 5 Modos de Posicionamiento
La propiedad position define el método de cálculo espacial que emplea el navegador para ubicar un elemento, activando las coordenadas top, right, bottom y left.
| Valor | ¿Sale del flujo? | Punto de Referencia | Uso Típico |
|---|---|---|---|
static |
No | El flujo HTML normal por defecto. Ignora coordenadas top/left. |
El 90% de los elementos comunes. |
relative |
No | Su propia posición original. Sirve como ancla para hijos con absolute. |
Ajustes finos y contenedores de insignias o botones flotantes. |
absolute |
Sí | El ancestro posicionado más cercano que no sea static (usualmente un padre relative). |
Insignias en esquinas, menús desplegables (dropdowns) e iconos sobre imágenes. |
fixed |
Sí | La ventana del navegador (viewport). Permanece inmóvil al hacer scroll. | Botones de chat flotante (WhatsApp), modales y barras de notificación superior. |
sticky |
No | Fluye como relative hasta que alcanza un umbral de scroll y se comporta como fixed. |
Barras de navegación superiores y cabeceras de tablas con scroll largo. |
El Patrón Clásico: Padre relative + Hijo absolute
Para colocar una etiqueta o insignia ("badge") en la esquina exacta de una tarjeta de producto, siempre declaramos:
.tarjeta {
position: relative; /* Actúa como sistema de coordenadas para sus hijos */
}
.insignia-oferta {
position: absolute;
top: 12px;
right: 12px; /* Fijado a 12px de la esquina superior derecha de la tarjeta */
}⚡ Insignia Absoluta y Botón Flotante con Posicionamiento
Observa cómo la insignia se ancla a la esquina de la tarjeta (position: absolute dentro de relative) y el botón de ayuda se fija a la pantalla (position: fixed):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Posicionamiento CSS3</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f1f5f9;
margin: 0;
padding: 30px;
color: #0f172a;
}
/* Tarjeta padre con position: relative */
.tarjeta-curso {
position: relative;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 24px;
max-width: 380px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
/* Insignia con position: absolute */
.insignia-esquina {
position: absolute;
top: -10px;
right: 15px;
background: #ef4444;
color: white;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: bold;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}
/* Botón de ayuda fijado con position: fixed */
.btn-flotante {
position: fixed;
bottom: 25px;
right: 25px;
background: #10b981;
color: white;
border: none;
padding: 12px 20px;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}
</style>
</head>
<body>
<div class="tarjeta-curso">
<span class="insignia-esquina">¡NUEVO!</span>
<h3 style="margin-top: 5px;">Máster en CSS3 & Grid</h3>
<p style="color: #64748b; font-size: 0.95rem; line-height: 1.5;">
La insignia roja está posicionada de forma absoluta respecto a este contenedor con <code>top: -10px; right: 15px</code>.
</p>
</div>
<button class="btn-flotante" onclick="alert('¡Botón fijo con position: fixed!')">
💬 Ayuda en Vivo
</button>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.