▷ Posición ABSOLUTA y RELATIVA, Cajas FLEXIBLES y BORDES

📦 Posicionamiento en CSS: absolute, relative y fixed con cajas flexibles y bordes

En diseño web, la propiedad position de CSS es fundamental para controlar la ubicación exacta de los elementos. En este artículo aprenderás la diferencia entre relative, absolute y fixed, cómo afectan el flujo del documento, y cómo se comportan cuando usamos cajas flexibles con bordes para visualizarlas mejor.

---

🎯 ¿Qué es la propiedad position?

position define cómo un elemento se posiciona en el documento. Sus valores más comunes son:

• relative: el elemento se posiciona relativo a su posición original.
• absolute: el elemento se posiciona relativo a su contenedor más cercano con posición relativa o absoluta.
• fixed: el elemento se mantiene fijo en la pantalla, incluso cuando se hace scroll.

---

📌 Ejemplo base con cajas visibles

<style>
.contenedor {
  width: 600px;
  height: 400px;
  border: 3px solid #333;
  margin: 30px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.caja {
  width: 150px;
  height: 100px;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.relativa {
  background-color: #4CAF50;
  position: relative;
  top: 20px;
  left: 20px;
  border: 2px dashed white;
}

.absoluta {
  background-color: #2196F3;
  position: absolute;
  top: 20px;
  right: 20px;
  border: 2px dashed white;
}

.fija {
  background-color: #f44336;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 2px dashed white;
}
</style>

📄 HTML:

<div class="contenedor">
  <div class="caja relativa">Relativa</div>
  <div class="caja absoluta">Absoluta</div>
</div>

<div class="caja fija">Fija</div>

---

🧭 ¿Qué hace cada una?

• Relativa: Se mueve desde su posición original, pero sigue ocupando su espacio en el flujo del documento.
• Absoluta: Sale del flujo del documento y se ubica respecto al contenedor más cercano con posición relativa. En este caso, .contenedor.
• Fija: Se pega a la ventana del navegador y no se mueve aunque se haga scroll. Ideal para menús o botones flotantes.

---

📦 ¿Y qué tiene que ver con cajas flexibles y bordes?

Usar bordes visibles y display: flex en el contenedor te permite:

• 📐 Ver claramente el espacio que ocupa cada caja.
• 🔧 Alinear fácilmente los elementos al centro, arriba, abajo, etc.
• 🧠 Entender cómo el posicionamiento afecta el flujo normal del layout.

Cuando usas position: absolute dentro de un contenedor con position: relative, el control de ubicación es muy preciso.

---

📌 Tips adicionales

• Evita abusar de position: absolute en layouts completos. Para eso es mejor usar Flexbox o Grid.
• Usa position: fixed para elementos como menús flotantes, botones de WhatsApp, o cabeceras sticky.
• Combina bordes visibles al practicar para identificar cómo se mueve cada elemento.

---

🧪 ¿Quieres practicar?

Crea un contenedor y coloca tres cajas con position: relative, absolute y fixed. Añade bordes a cada una para visualizar su espacio. Intenta cambiarlas de posición usando top, left, right o bottom y observa qué ocurre.

En el siguiente video te muestro el uso de las posiciones de cajas flexibles con bordes en HTML5 y CSS.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨