Ciencias de la Computación · Ceibal · Parte 2 de 2: Conceptos avanzados
🧱 Propiedad display
Sección 1 de 5

display: cómo se comportan las cajas

La propiedad display decide la regla de juego de cada caja: si ocupa toda la fila, si se pone al lado de otras, o si se alinean en una fila flexible. Es una de las propiedades más poderosas de CSS.

📗 Este es el Recurso 2 de 2 sobre el Modelo de Caja: acá vemos display, float y position. Si todavía no viste el Recurso 1 (box model, tamaño, bordes y unidades), te conviene empezar por ahí. Y si buscás display: grid en particular, tenés un recurso aparte dedicado solo a CSS Grid (Partes 1 y 2).

🧱 block — ocupa toda la fila

Hasta ahora cada caja vivía en su lugar. La propiedad display es la que decide cómo se acomodan las cajas entre sí: si se apilan una debajo de otra, si van en fila, si se reparten el espacio…

Un elemento block ocupa todo el ancho disponible y empuja al siguiente hacia abajo. Por defecto son block los <div>, <p>, <h1>… Se apilan como ladrillos, uno sobre otro.

🧱 block = una fila entera para cada caja, apiladas de arriba a abajo.
🎬 Video: Display & Visibility (min 02:28:28)

↔️ inline — solo lo que ocupa

Un elemento inline ocupa solo el ancho de su contenido y deja que otros se pongan al lado, en la misma línea. Por defecto son inline los <a>, <span>, <strong>…

No se les puede fijar width ni height: siempre miden lo que mide su contenido.

↔️ inline = solo el espacio justo, y comparte la línea con otros elementos.

🧩 inline-block — lo mejor de los dos

Se pone al lado de otros (como inline) pero sí acepta width, height, padding y margin (como block). Útil para botones o tarjetas que van en fila pero necesitan tamaño propio.

🧩 inline-block = fila + tamaño propio. El equilibrio entre block e inline.

🚫 none — desaparece

display: none hace que el elemento deje de existir visualmente: no ocupa espacio, como si no estuviera. Se usa muchísimo para mostrar/ocultar cosas (menús desplegables, mensajes).

🚫 none = invisible Y sin espacio reservado. No confundir con solo "ocultar visualmente".
🧩 ¿Lo entendiste? · De "apila" a "fila flexible"
1 · Ordenar: de "apila" a "fila flexible"

Ordená estos valores de display desde el que apila en columna simple hasta el que arma una fila flexible.

🧵 flex — filas y columnas flexibles

display: flex convierte un contenedor en flexible: sus hijos se alinean en fila (o columna) y se reparten el espacio de forma inteligente. Es la herramienta moderna para alinear y centrar — adiós a los trucos viejos.

.barra {
  display: flex;
  gap: 10px; /* espacio entre los hijos */
}
🧩 ¿Lo entendiste? · Cada valor con su comportamiento
2 · Arrastrar y soltar: cada valor con su comportamiento
Ocupa toda la fila y apila →
Desaparece sin ocupar espacio →
Alinea hijos en fila flexible →
🎬 Video: FlexBox (min 04:04:06)
🧩 ¿Lo entendiste? · Completá con el valor de display
3 · Completar: display
/* Una barra con sus ítems en fila flexible */
.menu { display: ; }

/* Ocultar un elemento por completo */
.oculto { display: ; }

/* Tarjeta con tamaño propio, en la misma fila que otras */
.tarjeta { display: ; }
✅ Repaso rápido · Opción múltiple
4 · Opción múltiple: display

⚙️ Cambiá el display en vivo

Elegí un valor de display para el contenedor y mirá cómo A, B y C se reacomodan al instante.

A
B
C

    
Con block cada caja ocupa su fila completa y se apilan. Cambiá el valor y mirá cómo se reacomodan A, B y C.

  

        

        

      

    

    

      
      

      
    

  


  

        🎯 PRÁCTICA de display — armá una barra de navegación
        

        
    
          
  1. En .menu, agregá display: flex; para poner los enlaces en fila.
    2. 
          
  2. En la misma clase, agregá gap: 18px; para separarlos entre sí.
    3. 
          
  3. Ejecutá y confirmá que Inicio, Productos y Contacto quedaron en una barra horizontal con espacio entre ellos.
    4. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
float: el texto que rodea

  
Antes de las herramientas modernas, float era la forma de hacer que el texto envolviera una imagen, como en las revistas. Sigue siendo útil saber cómo funciona.


    

    

      

      
      
      
      

    

    

    

      

        
🌊 float: left y float: right

        

        

          
La propiedad float nació para algo muy concreto: hacer que el texto envuelva una imagen, como en las revistas y los diarios. "Flotás" una imagen a la izquierda o a la derecha, y el texto se acomoda alrededor.

          
Hoy para armar layouts usamos flex y grid, pero float sigue siendo útil para ese efecto clásico — y vas a encontrarlo en mucho código existente.

        

        


.foto {
  float: left; /* la foto va a la izquierda, el texto la rodea */
  margin: 0 15px 10px 0; /* aire para que el texto no se pegue */
}

        



        🧩 ¿Lo entendiste? · Los pasos para flotar bien una imagen
        


1 · Ordenar: los pasos para flotar bien una imagen

        
Ordená los pasos para que una imagen flote y el contenedor no colapse.

        

        
        

      
        

      



        🧩 ¿Lo entendiste? · Cada regla con su función
        


2 · Arrastrar y soltar: cada regla con su función

        

        

          
Foto a la izquierda, texto la rodea → 

          
Contener los floats (limpieza) → 

          
Quitar la flotación → 

        

        
        

      
        

      



        🎬 Video: Float (min 02:52:53)
        

          

        

      

        

      


      

        
🧹 El problema: el contenedor “colapsa”

        

        

          
Antes del truco puntual, conviene conocer la propiedad en general: overflow le dice al navegador qué hacer cuando el contenido de una caja no entra en ella. Sus valores más comunes son visible (el contenido se desborda igual, es el valor por defecto), hidden (lo que no entra se recorta y desaparece), scroll (agrega barras de desplazamiento siempre) y auto (agrega barras de desplazamiento solo si hacen falta).

          
Cuando todos los hijos de una caja están flotados, la caja padre pierde su altura y parece vacía — un clásico dolor de cabeza.

          
La solución más simple es ponerle al contenedor overflow: hidden, que lo obliga a "contener" a sus hijos flotados: es un uso puntual de overflow, aprovechando que "recortar lo que se desborda" también sirve para contener floats.

          
⚠️ Si después de usar float ves que el fondo o el borde del contenedor no rodean a los elementos, casi seguro te falta la "limpieza": overflow: hidden en el padre lo resuelve en la mayoría de los casos.

        

        


.contenedor {
  overflow: hidden; /* técnica de limpieza: contiene los floats */
}

        



        🧩 ¿Lo entendiste? · Completá float y limpieza
        


3 · Completar: float y limpieza

        
/* Imagen flotada a la derecha */
.foto { : ; }

/* Limpieza: que el contenedor contenga los floats */
.caja { overflow: ; }

        
        

      
        

      



        ✅ Repaso rápido · Opción múltiple
        


4 · Opción múltiple: float

        


        

      



        🎬 Video: Overflow (min 02:50:37)
        

          

        

      

        

      


      

        
⚙️ Activá el float en vivo

        

        

          
Cambiá el valor de float de la foto y mirá cómo el texto se acomoda alrededor, a la izquierda o a la derecha.

        

        



    

      
    

    

      
FOTO

      
Este es un texto de ejemplo que debería acomodarse alrededor de la foto cuando la flotás a un costado. Probá cambiar el valor de float y mirá cómo el texto la rodea por la izquierda o por la derecha.

    

    

  

        

        

      

    

    

      
      

      
    

  


  

        🎯 PRÁCTICA de float — texto que rodea una foto
        

        
    
          
  1. En .foto, agregá float: left; para que la foto flote y el texto la rodee.
    2. 
          
  2. En .nota, agregá overflow: hidden; para que el contenedor no colapse.
    3. 
          
  3. Ejecutá y confirmá que el texto rodea la foto y que el borde del contenedor envuelve todo el contenido.
    4. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
position: ubicar cajas con precisión

  
A veces no alcanza con el flujo normal: querés un elemento en una esquina exacta, o un menú que te siga al hacer scroll. Para eso existe position.


    

    

      

      
      
      
      
      
      
      
      

    

    

    

      

        
📌 static — la posición por defecto

        

        

          
La propiedad position te da control fino sobre dónde se ubica exactamente una caja. Hasta ahora las cajas iban en el flujo natural (una tras otra); con position podés moverlas, superponerlas o fijarlas en pantalla.

          
static es el valor normal: la caja va donde le toca en el flujo, sin moverse. Todas las cajas son static hasta que les decís otra cosa.

        

        

          
📌 static = el comportamiento por defecto. Ningún top/left/right/bottom tiene efecto.

        

        

        

          

            
            🔒 vista-previa.html
          

          
.caja-b { position: static; }

          

            
Caja A

            
Caja B (static)

            
Caja C

          

        

        
🔴 En vivo: B tiene position: static — ocupa su lugar normal en la fila, exactamente igual que si no tuviera position.

      


      

        
↕️ relative — me corro desde mi lugar

        

        

          
La caja se ubica respecto a su propia posición original. Con top, left, etc., la empujás desde donde estaba, pero su hueco original se mantiene reservado.

        

        


.etiqueta {
  position: relative;
  top: 10px; /* 10px más abajo que su lugar normal */
}

        

        

        

          

            
            🔒 vista-previa.html
          

          
.caja-b { position: relative; top: 14px; left: 14px; }

          

            
Caja A

            
Caja B (relative)

            
Caja C

          

        

        
🔴 En vivo: B tiene position: relative; top: 14px; left: 14px; — se corre desde su lugar, pero fijate que A y C no se movieron: el hueco original de B sigue reservado en la fila.



        🧩 ¿Lo entendiste? · Del más "quieto" al más "fijo"
        


1 · Ordenar: del más "quieto" al más "fijo a pantalla"

        
Ordená los valores de position: del que no se mueve nada, al que queda clavado a la ventana.

        

        
        


        

      

      


      

        
🎯 absolute — respecto a un ancestro

        

        

          
La caja sale del flujo (deja de reservar su lugar) y se posiciona respecto al ancestro posicionado más cercano. Sirve para colocar algo en una esquina exacta, como un globo de "nuevo" sobre una tarjeta.

          
💡 Truco clásico: poné position: relative en el contenedor y position: absolute en el hijo. Así el hijo se ubica respecto al contenedor, no respecto a toda la página.

        

        

          
🎯 absolute necesita un ancestro con position: relative para no ubicarse respecto a toda la página.

        

        

        

          

            
            🔒 vista-previa.html
          

          
.tarjeta { position: relative; }
.etiqueta { position: absolute; top: 6px; right: 6px; }

          

            NUEVO
            
Tarjeta de producto

          

        

        
🔴 En vivo: el recuadro de la tarjeta es position: relative; la etiqueta "NUEVO" es position: absolute; top: 6px; right: 6px; — por eso queda anclada a esa esquina exacta de la tarjeta, y no de toda la página.



        🧩 ¿Lo entendiste? · Cada valor con su referencia
        


2 · Arrastrar y soltar: cada valor con su referencia

        

        

          
Posición normal por defecto → 

          
Se corre desde su lugar original → 

          
Clavado a la ventana al hacer scroll → 

          
Menú que se pega al bajar → 

        

        
        


        

      

      


      

        
📍 fixed — me clavo a la pantalla

        

        

          
La caja se fija respecto a la ventana del navegador y no se mueve aunque hagas scroll. Es lo que usan los botones flotantes de "subir" o de chat que siempre ves en una esquina.

        

        

          
📍 fixed = clavado a la ventana, no a la página. Por eso siempre se ve, aunque bajes el scroll.

        

        

        

          

            
            🔒 vista-previa.html
          

          
.boton { position: fixed; top: 10px; right: 10px; }

          

            
📌 Fijo

            

              

                
Scrolleá dentro de este recuadro: el botón "📌 Fijo" no se mueve de la esquina, aunque el resto del contenido sí se desplace hacia arriba.

                
Esta es la técnica de los botones flotantes de "subir" o de chat: quedan siempre visibles en una esquina, sin importar cuánto scrolleés.

                
Seguí bajando y confirmá que el botón nunca se despega de esa esquina.

              

            

          

        

        
🔴 En vivo: en una página real, position: fixed queda clavado a toda la ventana. Acá lo mostramos limitado a este recuadro (con un pequeño truco de CSS) para que puedas comprobarlo sin salir de la página.

      


      

        
🧷 sticky — pegajoso para menús

        

        

          
Mezcla lo mejor: la caja se comporta normal hasta que llegás a cierto punto al hacer scroll, y ahí se "pega" y queda fija. Es la técnica detrás de los menús que acompañan mientras bajás por la página.

        

        


.menu {
  position: sticky;
  top: 0; /* se pega al borde superior al hacer scroll */
}

        

        

        

          

            
            🔒 vista-previa.html
          

          
.menu { position: sticky; top: 0; }

          

            

              
📎 Menú pegajoso

              

                
Sección 1 de contenido de relleno para poder scrollear.

                
Sección 2 — seguí bajando.

                
Sección 3 — el menú ya debería estar pegado arriba del todo.

                
Sección 4 — confirmá que el menú te "siguió" hasta acá.

              

            

          

        

        
🔴 En vivo: el menú tiene position: sticky; top: 0; — se comporta normal hasta llegar arriba del recuadro con scroll, y ahí se queda pegado.



        ✅ Repaso rápido · Opción múltiple
        


4 · Opción múltiple: posicionamiento

        


        

      

      


      

        
🗂️ z-index — quién queda arriba

        

        

          
Cuando dos cajas posicionadas (con relative, absolute, fixed o sticky) se superponen, alguna queda arriba y tapa a la otra. z-index es el número que decide ese orden: cuanto más alto, más adelante queda el elemento.

          
⚠️ z-index solo funciona en elementos posicionados: si el elemento tiene position: static (el valor por defecto), z-index no tiene ningún efecto.

        

        


.globo {
  position: absolute;
  z-index: 10; /* queda por encima de las cajas con z-index menor */
}

          
🗂️ z-index más alto = más al frente. Solo cuenta en elementos con position distinto de static.

        

        

        

          

            
            🔒 vista-previa.html
          

          
.caja-1 { z-index: 1; }
.caja-2 { z-index: 5; }

          

            
z-index: 1

            
z-index: 5

          

        

        
🔴 En vivo: la caja "z-index: 5" queda por encima de "z-index: 1", aunque en el HTML esté escrita después. Si les sacaras el position a ambas, z-index dejaría de tener efecto.



        🎬 Video: Z-Index (min 02:47:37)
        

          

        

      

      


      

        
📋 Resumen: los 5 valores de position

        

        

          
Ya viste los cinco valores de position en acción, cada uno con su ejemplo en vivo. Antes de pasar a z-index (que ya repasaste) y a la práctica integrada, tené esta tabla a mano como referencia rápida.

        

        

          
📋 Guardá esta tabla: es el resumen de toda la sección de position.

        

        

        

          
ValorRespecto a…Uso típico

          
            
staticEl flujo normalEl comportamiento por defecto

            
relativeSu propia posición originalPequeños ajustes; base para absolute

            
absoluteSu ancestro posicionadoGlobos, etiquetas, esquinas exactas

            
fixedLa ventana del navegadorBotones flotantes que no se mueven

            
stickyEl scroll (mezcla)Menús que acompañan al bajar

          
        

      

    

    

      
      

      
    

  


  

        🎯 PRÁCTICA de Posicionamiento — un globo "NUEVO" en la esquina
        

        
    
          
  1. En .tarjeta, agregá position: relative; para que sea la referencia del globo.
    2. 
          
  2. En .globo, agregá position: absolute; (ya tiene top y right definidos).
    3. 
          
  3. Ejecutá y confirmá que el globo "NUEVO" quedó anclado en la esquina superior derecha de la tarjeta.
    4. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
¡Armá una página completa! 🚀

  
Llegaste al final de las dos partes de este recurso. Es el contenido más difícil del curso: en esta misión vas a juntar TODO lo que practicaste en la Parte 1 (box model, tamaño, bordes, unidades) y en esta Parte 2 (display y position).


  

    
🎯 MISIÓN: La tarjeta de producto perfecta

    
Vas a maquetar la tarjeta de un producto inventado usando el modelo de caja, el tamaño, los bordes, las unidades, el display y el posicionamiento. Tu tarjeta debe tener:

    
    
      
  • Un box model cuidado: padding interno y margin externo
    • 
      
  • Un tamaño controlado con max-width (responsivo)
    • 
      
  • Bordes con border-radius (esquinas redondeadas)
    • 
      
  • Al menos una unidad relativa (%, rem, vh…)
    • 
      
  • display: flex para alinear algún grupo de elementos
    • 
      
  • Una etiqueta posicionada con position: absolute (un globo en la esquina)
    • 
    

  


  
🛤️ Flujo de trabajo (método paso a paso)

  

    
1
📦 Armá la caja: padding y margin de la tarjeta.

    
2
📐 Limitá el tamaño con max-width.

    
3
🔲 Redondeá los bordes con border-radius.

    
4
🧱 Alineá con flex lo que vaya en fila.

    
5
📌 Posicioná el globo con relative + absolute.

    
6
📥 Ejecutá, ajustá y descargá tu trabajo.

  


  

  💻 Tu simulador
  

  
El HTML ya está armado con todo lo que necesitás para la misión: vos ponés el CSS. Tab inserta 2 espacios.

  
    
    
  1. En .tarjeta-producto, agregá padding y margin para darle aire por dentro y por fuera.
    2. 
    
  2. En la misma clase, agregá max-width (por ejemplo 320px) para que la tarjeta no crezca sin límite.
    3. 
    
  3. Agregá border-radius a .tarjeta-producto para redondear sus esquinas.
    4. 
    
  4. En .etiquetas, agregá display: flex; (y un gap) para alinear las etiquetas y el botón en fila.
    5. 
    
  5. Agregá position: relative; a .tarjeta-producto y position: absolute; (con top y right) a .globo para anclarlo en la esquina.
    6. 
    
  6. Ejecutá, ajustá los detalles y descargá tu tarjeta terminada.
    7. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
      
    

    

  

  

  








  
📖 Glosario interactivo

  
Tocá cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.