Skip to content
Logo de la documentación HoneyCode

6. Posicionamiento y Display

El posicionamiento y la propiedad display son fundamentales para controlar cómo se colocan y comportan los elementos en la página.

📺 Propiedad display

Section titled “📺 Propiedad display”

La propiedad display define cómo se comporta un elemento en el flujo del documento.

display: block - Elementos de bloque

Section titled “display: block - Elementos de bloque”

Los elementos de bloque ocupan todo el ancho disponible y comienzan en una nueva línea.

.bloque {
  display: block;
  width: 100%;  /* Por defecto */
  /* Ocupa toda la línea */
}
/* Elementos block por defecto: div, p, h1-h6, section, article, etc. */


.elemento-block {
  display: block;
}


/* Características:
   ✅ Ocupa todo el ancho disponible
   ✅ Comienza en una nueva línea
   ✅ Empuja elementos siguientes hacia abajo
   ✅ Respeta width, height, margin, padding
   ✅ Se pueden centrar con margin: 0 auto
*/
┌────────────────────────────────┐
│  Elemento Block 1              │
└────────────────────────────────┘
┌────────────────────────────────┐
│  Elemento Block 2              │
└────────────────────────────────┘
┌────────────────────────────────┐
│  Elemento Block 3              │
└────────────────────────────────┘

display: inline - Elementos en línea

Section titled “display: inline - Elementos en línea”

Los elementos inline fluyen con el texto y no comienzan en una nueva línea.

.en-linea {
  display: inline;
  /* Fluye con el texto */
}
/* Elementos inline por defecto: span, a, strong, em, img, etc. */


.elemento-inline {
  display: inline;
}


/* Características:
   ✅ Fluye con el texto
   ✅ No comienza en nueva línea
   ✅ Solo ocupa el espacio de su contenido
   ❌ NO respeta width y height
   ⚠️ Solo respeta margin/padding horizontal
   ❌ NO se puede centrar con margin: 0 auto
*/
Texto normal [Elemento 1] más texto [Elemento 2] continúa
en la misma línea [Elemento 3] hasta que se acaba el espacio.

display: inline-block - Lo mejor de ambos mundos

Section titled “display: inline-block - Lo mejor de ambos mundos”

Combina características de block e inline.

.inline-block {
  display: inline-block;
  /* Fluye en línea pero respeta dimensiones */
}
.elemento-inline-block {
  display: inline-block;
}


/* Características:
   ✅ Fluye con el texto (como inline)
   ✅ No comienza en nueva línea
   ✅ Respeta width y height (como block)
   ✅ Respeta margin y padding completos
   ✅ Se puede alinear verticalmente
   ⚠️ Deja espacio en blanco entre elementos
*/
Texto [Elem 1] [Elem 2] [Elem 3] más texto
      └─────┘  └─────┘  └─────┘
      Respetan width/height pero fluyen en línea

display: none - Ocultar elementos

Section titled “display: none - Ocultar elementos”

Elimina completamente el elemento del flujo del documento.

.oculto {
  display: none;
  /* El elemento desaparece completamente */
}
.elemento-oculto {
  display: none;
}


/* Características:
   ✅ Elemento completamente invisible
   ✅ No ocupa espacio en el layout
   ✅ No es accesible para lectores de pantalla
   ✅ Útil para mostrar/ocultar con JavaScript
   ⚠️ Diferente a visibility: hidden
*/

Otros valores de display

Section titled “Otros valores de display”
/* display: flex - Flexbox */
.contenedor-flex {
  display: flex;
  gap: 10px;
}
/* Los hijos se convierten en flex items */


/* display: grid - Grid */
.contenedor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Los hijos se convierten en grid items */

📍 Propiedad position

Section titled “📍 Propiedad position”

La propiedad position controla cómo se posiciona un elemento en la página.

position: static (default)

Section titled “position: static (default)”

Es el valor por defecto de todos los elementos. El elemento sigue el flujo normal del documento y NO responde a las propiedades top, right, bottom, left o z-index.

.estatico {
  position: static;  /* Valor por defecto */
  /* NO se puede mover con top, right, bottom, left */
  /* NO responde a z-index */
}
.elemento-static {
  position: static;
}


/* Características:
   ✅ Valor por defecto de todos los elementos
   ✅ Sigue el flujo normal del documento
   ❌ NO responde a top, right, bottom, left
   ❌ NO responde a z-index
   ✅ Se posiciona según el orden en el HTML
*/

position: relative - Relativo a su propia posición original

Section titled “position: relative - Relativo a su propia posición original”

El elemento se mueve desde donde estaría normalmente (su posición original en el flujo). Mantiene su espacio reservado y otros elementos NO se mueven.

.relativo {
  position: relative;
  top: 20px;     /* Se mueve 20px ABAJO desde su posición original */
  left: 30px;    /* Se mueve 30px DERECHA desde su posición original */
  /* Se basa en SU PROPIA posición, NO en el padre ni la ventana */
}
.elemento-relativo {
  position: relative;
  top: 10px;
  left: 20px;
}


/* Características:
   ✅ Se mueve desde su posición original
   ✅ Mantiene su espacio en el flujo
   ✅ Otros elementos no se mueven
   ✅ Crea contexto de posicionamiento para hijos absolute
   ✅ Responde a z-index
*/
Posición original:
┌────────┐
│ Elem 1 │
└────────┘
┌────────┐
│ Elem 2 │  ← Posición original (espacio reservado)
└────────┘
┌────────┐
│ Elem 3 │
└────────┘


Con position: relative; top: 20px; left: 30px:
┌────────┐
│ Elem 1 │
└────────┘
┌────────┐  ← Espacio reservado
│        │
└────────┘    ┌────────┐
              │ Elem 2 │  ← Movido visualmente
              └────────┘
┌────────┐
│ Elem 3 │
└────────┘

position: absolute - Relativo al padre con position

Section titled “position: absolute - Relativo al padre con position”

El elemento se posiciona relativo al primer padre que tenga position (relative, absolute, fixed o sticky). Si no encuentra ningún padre con position, se posiciona relativo al <body>.

.absoluto {
  position: absolute;
  top: 0;
  right: 0;
  /* Se posiciona desde el padre con position (no static) */
}


/* El padre debe tener position para ser la referencia */
.padre {
  position: relative;  /* Crea el contexto de posicionamiento */
}
.elemento-absoluto {
  position: absolute;
  top: 20px;
  right: 30px;
}


/* Características:
   ✅ Sale del flujo normal del documento
   ✅ No ocupa espacio (otros elementos lo ignoran)
   ✅ Se posiciona relativo al ancestro con position (no static)
   ✅ Si no hay ancestro posicionado, se posiciona relativo al <body>
   ✅ Responde a z-index
   ⚠️ Puede superponerse a otros elementos
*/
Sin position: absolute:
┌────────┐
│ Elem 1 │
└────────┘
┌────────┐
│ Elem 2 │
└────────┘
┌────────┐
│ Elem 3 │
└────────┘


Con position: absolute:
┌────────┐
│ Elem 1 │
└────────┘
┌────────┐  ← Elem 2 sale del flujo
│ Elem 3 │  ← Elem 3 sube
└────────┘
      ┌────────┐
      │ Elem 2 │  ← Flotando en posición absoluta
      └────────┘

position: fixed - Fijo en la ventana del navegador

Section titled “position: fixed - Fijo en la ventana del navegador”

El elemento se posiciona relativo a la ventana (viewport) y permanece fijo al hacer scroll. Sale del flujo del documento y no ocupa espacio.

.fijo {
  position: fixed;
  top: 0;
  left: 0;
  /* Se posiciona desde la VENTANA, NO desde el padre */
  /* Permanece fijo al hacer scroll */
}
.elemento-fijo {
  position: fixed;
  top: 0;
  right: 0;
}


/* Características:
   ✅ Sale del flujo normal
   ✅ Se posiciona relativo al viewport (ventana)
   ✅ Permanece fijo al hacer scroll
   ✅ No se mueve con el scroll
   ✅ Responde a z-index
   ⚠️ Puede cubrir contenido
*/

position: sticky - Híbrido entre relative y fixed

Section titled “position: sticky - Híbrido entre relative y fixed”

El elemento comienza como relative y se vuelve fixed cuando alcanzas el umbral definido (top, bottom, left o right) al hacer scroll. Se queda dentro de su contenedor padre.

.pegajoso {
  position: sticky;
  top: 0;
  /* Comienza como relative, se vuelve fixed al llegar a top: 0 */
  /* Requiere especificar top, bottom, left o right */
}
.elemento-sticky {
  position: sticky;
  top: 20px;
}


/* Características:
   ✅ Comienza como relative
   ✅ Se vuelve fixed al alcanzar el umbral (top/bottom)
   ✅ Se queda dentro de su contenedor padre
   ✅ Vuelve a relative al salir del contenedor
   ✅ Respeta el flujo del documento
   ⚠️ Requiere especificar top, bottom, left o right
*/
Antes del scroll:
┌──────────────────┐
│ Contenido        │
├──────────────────┤
│ Sticky Element   │ ← position: relative
├──────────────────┤
│ Más contenido    │
└──────────────────┘


Durante el scroll:
┌──────────────────┐
│ Sticky Element   │ ← position: fixed (pegado arriba)
├──────────────────┤
│ Contenido scroll │
│                  │
└──────────────────┘


Al final del contenedor:
┌──────────────────┐
│ Contenido        │
│ Sticky Element   │ ← Vuelve a relative
└──────────────────┘

🔢 Propiedad z-index

Section titled “🔢 Propiedad z-index”

El z-index controla el orden de apilamiento en el eje Z (profundidad). Define qué elementos aparecen adelante o atrás cuando se superponen.

⚠️ Requisito importante: z-index solo funciona en elementos con position diferente de static (relative, absolute, fixed o sticky). El elemento padre NO necesita tener position para que z-index funcione en los hijos.

/* ✅ z-index funciona (el elemento tiene position) */
.elemento {
  position: relative;  /* Puede ser relative, absolute, fixed o sticky */
  z-index: 10;        /* Controla el apilamiento */
}


/* ❌ z-index NO funciona (position: static) */
.elemento-static {
  position: static;   /* O sin position (static por defecto) */
  z-index: 999;      /* ❌ Ignorado completamente */
}


/* El padre NO necesita position para que z-index funcione en los hijos */
.padre {
  /* Sin position está bien */
}


.hijo {
  position: relative;  /* El hijo SÍ necesita position */
  z-index: 5;         /* ✅ Funciona aunque el padre no tenga position */
}
/* z-index solo funciona con elementos posicionados */
.elemento-1 {
  position: relative;
  z-index: 1;  /* Atrás */
}


.elemento-2 {
  position: relative;
  z-index: 10;  /* Adelante */
}


.elemento-3 {
  position: relative;
  z-index: 5;  /* En medio */
}


/* Orden de apilamiento: 1 → 5 → 10 (de atrás hacia adelante) */
Vista lateral (eje Z):


                    ┌─────────┐
                    │ z: 10   │ ← Más adelante
                    └─────────┘
              ┌─────────┐
              │ z: 5    │
              └─────────┘
        ┌─────────┐
        │ z: 1    │ ← Más atrás
        └─────────┘

💧 Propiedad overflow

Section titled “💧 Propiedad overflow”

Controla qué sucede cuando el contenido desborda su contenedor.

.contenedor {
  overflow: visible;  /* Default */
  overflow: hidden;   /* Oculta el desbordamiento */
  overflow: scroll;   /* Siempre muestra scrollbars */
  overflow: auto;     /* Scrollbars solo si es necesario */
}
/* visible - El contenido desborda (default) */
.visible {
  width: 200px;
  height: 100px;
  overflow: visible;
}
/* El contenido que no cabe se muestra fuera del contenedor */
┌──────────────┐
│ Contenedor   │
│ Contenido    │
│ que desborda │
└──────────────┘
  y continúa aquí ← Visible fuera

Overflow en ejes específicos

Section titled “Overflow en ejes específicos”
/* Control independiente de cada eje */
.elemento {
  overflow-x: hidden;  /* Sin scroll horizontal */
  overflow-y: auto;    /* Scroll vertical si es necesario */
}


/* Casos comunes */
.sin-scroll-horizontal {
  overflow-x: hidden;
  overflow-y: visible;
}


.solo-scroll-vertical {
  overflow-x: hidden;
  overflow-y: auto;
}


.scroll-ambos {
  overflow-x: auto;
  overflow-y: auto;
}

Estilizar scrollbars (Webkit)

Section titled “Estilizar scrollbars (Webkit)”
/* Personalizar scrollbar en Chrome/Safari */
.custom-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}


.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}


.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}


.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/* Scrollbar delgado */
.thin-scroll {
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: #888 #f1f1f1;  /* thumb track */
}

👁️ Visibilidad y opacidad

Section titled “👁️ Visibilidad y opacidad”

visibility - Controla la visibilidad

Section titled “visibility - Controla la visibilidad”
.elemento {
  visibility: visible;  /* Visible (default) */
  visibility: hidden;   /* Invisible pero ocupa espacio */
  visibility: collapse; /* Para tablas */
}
/* visibility: hidden - Ocupa espacio */
.invisible {
  visibility: hidden;
}
/* El elemento es invisible pero mantiene su espacio */


/* display: none - No ocupa espacio */
.oculto {
  display: none;
}
/* El elemento desaparece completamente */

Comparación:

visibility: hidden:
┌─────┐
│  A  │
└─────┘
┌─────┐  ← B invisible (pero ocupa espacio)
│     │
└─────┘
┌─────┐
│  C  │
└─────┘


display: none:
┌─────┐
│  A  │
└─────┘
        ← B no existe en el layout
┌─────┐
│  C  │
└─────┘

opacity - Controla la transparencia

Section titled “opacity - Controla la transparencia”
.elemento {
  opacity: 1;    /* 100% opaco (default) */
  opacity: 0.5;  /* 50% transparente */
  opacity: 0;    /* Completamente transparente */
}
.semi-transparente {
  opacity: 0.7;  /* 70% opaco, 30% transparente */
}


/* Características:
   ✅ Afecta al elemento Y todos sus hijos
   ✅ Valores de 0 (transparente) a 1 (opaco)
   ✅ El elemento sigue ocupando espacio
   ✅ Sigue siendo clickeable (incluso con opacity: 0)
   ✅ Se puede animar suavemente
*/

Comparación de métodos para ocultar

Section titled “Comparación de métodos para ocultar”
PropiedadOcupa espacioClickeableAccesibleAnimableUso común
display: none❌ No❌ No❌ No❌ NoMostrar/ocultar con JS
visibility: hidden✅ Sí❌ No❌ No✅ SíMantener layout
opacity: 0✅ Sí✅ Sí✅ Sí✅ SíFade in/out
position: absolute; left: -9999px❌ No❌ No✅ Sí❌ NoOcultar visualmente

🎓 Resumen

Section titled “🎓 Resumen”
🐝