CSS

Tutorial CSS: Propiedades de posicionamiento

Aprende las propiedades de posicionamiento en CSS y cómo afectan al flujo del documento para crear diseños web precisos y efectivos.

Flujo normal del documento y concepto de posicionamiento

Cuando creamos una página web, cada elemento HTML se coloca en la pantalla siguiendo un orden predeterminado conocido como el flujo normal del documento. Este flujo es la forma en que los navegadores organizan y presentan los elementos cuando no aplicamos ninguna propiedad CSS que altere su posicionamiento.

En el flujo normal, los elementos se colocan uno después de otro, dependiendo de su tipo de visualización (display) predeterminado. Podemos distinguir dos comportamientos principales:

Los elementos de bloque (como <div>, <p>, <h1>) ocupan todo el ancho disponible y generan saltos de línea antes y después.
Los elementos en línea (como <span>, <a>, <strong>) ocupan solo el espacio necesario para su contenido y no generan saltos de línea.

Veamos un ejemplo básico de cómo se comportan los elementos en el flujo normal:

<div class="container">
  <h2>Título del artículo</h2>
  <p>Este es un párrafo con <span>texto destacado</span> en el medio.</p>
  <div>Otro bloque de contenido</div>
</div>

/* Estilos para visualizar mejor los elementos */
.container {
  border: 1px solid #ccc;
  padding: 10px;
}

h2, p, div {
  border: 1px dashed #999;
  margin: 10px 0;
}

span {
  border: 1px solid red;
}

En este ejemplo, cada elemento de bloque (h2, p, div) aparecerá uno debajo del otro, ocupando todo el ancho disponible, mientras que el elemento en línea (span) fluirá dentro del párrafo sin causar saltos de línea.

El concepto de posicionamiento en CSS

El posicionamiento en CSS nos permite controlar cómo se ubican los elementos en la página, permitiéndonos modificar o anular completamente el flujo normal del documento. La propiedad principal para esto es position, que puede tomar varios valores:

static: Es el valor predeterminado. El elemento sigue el flujo normal del documento.
relative: Posiciona el elemento en relación a su posición normal en el flujo.
absolute: Posiciona el elemento fuera del flujo normal, en relación al ancestro posicionado más cercano.
fixed: Posiciona el elemento en relación a la ventana del navegador.
sticky: Un híbrido entre relative y fixed, que cambia según el desplazamiento.

La propiedad position por sí sola no hace mucho; necesita trabajar junto con las propiedades de desplazamiento: top, right, bottom y left. Estas propiedades definen la distancia desde los bordes del elemento contenedor o de la ventana.

Veamos un ejemplo básico de posicionamiento:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  top: 20px;
  left: 30px;
}

En este caso, el elemento .box se desplazará 20 píxeles hacia abajo y 30 píxeles hacia la derecha desde su posición original en el flujo normal.

Posicionamiento estático (static)

El posicionamiento static es el comportamiento predeterminado de todos los elementos HTML. Un elemento con position: static sigue el flujo normal del documento y las propiedades de desplazamiento (top, right, bottom, left) no tienen ningún efecto sobre él.

.default-box {
  position: static;
  /* Las siguientes propiedades no tendrán efecto */
  top: 20px;
  left: 30px;
}

Contexto de posicionamiento

Un concepto fundamental para entender el posicionamiento en CSS es el contexto de posicionamiento. Cuando usamos position: absolute o position: fixed, el elemento se posiciona en relación a un contexto específico:

Para position: absolute, el contexto es el ancestro posicionado más cercano (cualquier ancestro con un valor de position diferente a static).
Para position: fixed, el contexto es siempre la ventana del navegador.

Si no hay un ancestro posicionado, un elemento con position: absolute se posicionará en relación al elemento <html> (el documento).

.container {
  position: relative; /* Crea un contexto de posicionamiento */
  width: 300px;
  height: 200px;
  border: 2px solid #333;
}

.absolute-box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
}

En este ejemplo, .absolute-box se posicionará a 20 píxeles desde la parte superior y 20 píxeles desde la derecha del .container, no de la página completa, porque .container tiene position: relative.

Capas de visualización (z-index)

Cuando modificamos el posicionamiento de los elementos, pueden superponerse unos con otros. La propiedad z-index nos permite controlar qué elementos aparecen por encima de otros. Los elementos con un valor de z-index más alto aparecerán por encima de los elementos con un valor más bajo.

.box-1 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  background-color: blue;
}

.box-2 {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 2; /* Aparecerá por encima de .box-1 */
  background-color: red;
}

Es importante recordar que z-index solo funciona en elementos posicionados (con un valor de position diferente a static) y que crea contextos de apilamiento, lo que puede afectar cómo se organizan los elementos en capas.

El posicionamiento es una herramienta poderosa en CSS que nos permite crear diseños complejos y precisos. Sin embargo, es importante usarlo con moderación, ya que sacar elementos del flujo normal puede complicar la estructura de la página y afectar la responsividad del diseño.

Position relative y sus coordenadas de desplazamiento

El posicionamiento relativo (position: relative) es una de las técnicas más útiles y versátiles en CSS para ajustar la ubicación de elementos sin romper el flujo del documento. A diferencia de otros valores de posicionamiento, relative permite desplazar un elemento desde su posición original manteniendo su espacio reservado en la página.

Cuando aplicamos position: relative a un elemento, este mantiene su lugar en el flujo normal del documento, pero podemos desplazarlo utilizando las coordenadas de desplazamiento: top, right, bottom y left. Estas propiedades definen la distancia que el elemento se moverá desde su posición original.

Sintaxis básica

.elemento {
  position: relative;
  top: 20px;    /* Desplaza 20px hacia abajo */
  left: 30px;   /* Desplaza 30px hacia la derecha */
}

Funcionamiento de las coordenadas de desplazamiento

Las coordenadas funcionan de la siguiente manera:

top: Desplaza el elemento desde su borde superior. Un valor positivo mueve el elemento hacia abajo.
right: Desplaza el elemento desde su borde derecho. Un valor positivo mueve el elemento hacia la izquierda.
bottom: Desplaza el elemento desde su borde inferior. Un valor positivo mueve el elemento hacia arriba.
left: Desplaza el elemento desde su borde izquierdo. Un valor positivo mueve el elemento hacia la derecha.

Veamos un ejemplo práctico:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  top: 20px;
  left: 50px;
}

En este caso, el elemento .box se desplazará 20 píxeles hacia abajo y 50 píxeles hacia la derecha desde su posición original.

Valores negativos

Las coordenadas de desplazamiento también pueden tomar valores negativos, lo que invierte la dirección del movimiento:

.box-negative {
  position: relative;
  top: -15px;   /* Desplaza 15px hacia arriba */
  left: -25px;  /* Desplaza 25px hacia la izquierda */
}

Combinación de coordenadas opuestas

Podemos usar coordenadas opuestas (top/bottom o left/right) simultáneamente, pero esto puede generar comportamientos inesperados. En general, el navegador dará prioridad a top sobre bottom y a left sobre right para elementos con position: relative:

.box-conflict {
  position: relative;
  top: 20px;     /* Esta tendrá prioridad */
  bottom: 30px;  /* Esta será ignorada */
  left: 40px;    /* Esta tendrá prioridad */
  right: 50px;   /* Esta será ignorada */
}

Unidades de medida en las coordenadas

Las coordenadas de desplazamiento pueden utilizar cualquier unidad de medida válida en CSS:

.box-units {
  position: relative;
  top: 2em;         /* Usando em */
  left: 5%;         /* Usando porcentaje */
  bottom: 10vh;     /* Usando viewport height */
  right: calc(10% + 20px); /* Usando calc() */
}

Ejemplo práctico: Ajuste fino de elementos

Un uso común del posicionamiento relativo es realizar ajustes finos en la ubicación de elementos, como en este ejemplo donde ajustamos ligeramente la posición de un icono:

.icon {
  display: inline-block;
  position: relative;
  top: -2px; /* Ajuste fino para alinear verticalmente */
}

Ejemplo: Superposición controlada de elementos

Podemos usar position: relative junto con z-index para crear superposiciones controladas:

.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  position: relative; /* Establece el contexto de posicionamiento */
}

.card-badge {
  position: relative;
  top: -10px;
  left: 10px;
  background-color: #e74c3c;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1; /* Asegura que el badge aparezca por encima */
}

Ejemplo: Creación de efectos visuales

El posicionamiento relativo también es útil para crear efectos visuales como sombras o bordes desplazados:

.fancy-box {
  width: 200px;
  height: 150px;
  background-color: #3498db;
  position: relative;
}

.fancy-box::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -1; /* Coloca la sombra detrás del elemento */
}

Consideraciones importantes

Al trabajar con position: relative, es importante tener en cuenta:

El elemento mantiene su espacio original en el flujo del documento, incluso después de ser desplazado.
El desplazamiento es relativo a la posición original del elemento, no a su contenedor.
El posicionamiento relativo establece un nuevo contexto de posicionamiento para elementos hijos con position: absolute.
Los márgenes y rellenos del elemento siguen funcionando normalmente.

.container {
  border: 2px solid #333;
  padding: 20px;
}

.relative-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
  position: relative;
  top: 30px;
  left: 30px;
}

/* El siguiente elemento respetará el espacio original de .relative-box */
.next-element {
  background-color: #e74c3c;
  height: 50px;
}

En este ejemplo, aunque .relative-box se desplaza 30px hacia abajo y 30px hacia la derecha, el elemento .next-element se posicionará como si .relative-box estuviera en su posición original, respetando el flujo normal del documento.

El posicionamiento relativo es una herramienta fundamental en CSS que ofrece un equilibrio entre el control preciso de la ubicación y el respeto por el flujo del documento, lo que lo hace ideal para ajustes finos de diseño sin causar problemas de estructura en la página.

Efectos del posicionamiento en el flujo del documento

Cuando aplicamos diferentes valores de position a los elementos HTML, alteramos significativamente cómo estos interactúan con el flujo normal del documento. Cada tipo de posicionamiento tiene un impacto distinto en la disposición general de la página y en cómo los elementos circundantes responden a estos cambios.

Posicionamiento estático y su relación con el flujo

El posicionamiento static (valor predeterminado) mantiene los elementos completamente dentro del flujo normal. Cuando un elemento tiene position: static:

Ocupa su espacio natural en el documento
Los elementos siguientes se colocan a continuación
No se pueden usar propiedades de desplazamiento (top, right, bottom, left)

.static-element {
  position: static;
  /* Las siguientes propiedades no tendrán efecto */
  top: 20px;
  left: 30px;
}

Posicionamiento relativo y su efecto en el flujo

Como ya hemos visto, el posicionamiento relative tiene un comportamiento particular:

El elemento se desplaza visualmente pero mantiene su espacio original en el flujo
Crea un "fantasma" invisible en la posición original que sigue afectando a los demás elementos
Los elementos circundantes actúan como si el elemento no se hubiera movido

Veamos un ejemplo que ilustra este comportamiento:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
}

.relative-box {
  position: relative;
  top: 30px;
  left: 30px;
  background-color: #e74c3c;
}

<div class="box">Caja 1</div>
<div class="box relative-box">Caja 2 (relativa)</div>
<div class="box">Caja 3</div>

En este ejemplo, aunque la "Caja 2" se desplaza visualmente, la "Caja 3" se posiciona como si la "Caja 2" estuviera en su lugar original. Este comportamiento es crucial para entender por qué el posicionamiento relativo no "rompe" el flujo del documento.

Posicionamiento absoluto: saliendo del flujo

El posicionamiento absolute tiene un efecto drástico en el flujo del documento:

El elemento se elimina completamente del flujo normal
No reserva espacio en el documento
Los elementos circundantes se reposicionan como si el elemento no existiera
Se posiciona en relación al ancestro posicionado más cercano

.container {
  position: relative;
  border: 2px solid #333;
  height: 200px;
  margin-bottom: 20px;
}

.absolute-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  top: 30px;
  left: 30px;
}

.next-element {
  background-color: #2ecc71;
  padding: 10px;
}

<div class="container">
  <div class="absolute-box">Posición absoluta</div>
  <div class="next-element">Este elemento ignora la caja absoluta</div>
</div>

En este ejemplo, .next-element se posiciona como si .absolute-box no existiera, ocupando el espacio desde la parte superior del contenedor.

Posicionamiento fijo: independencia total del flujo

El posicionamiento fixed tiene un efecto similar al absoluto en cuanto al flujo:

El elemento se elimina completamente del flujo normal
Permanece fijo en la misma posición incluso al desplazarse por la página
Se posiciona en relación a la ventana del navegador
Los elementos circundantes ignoran su existencia

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #34495e;
  color: white;
  padding: 10px;
  z-index: 100;
}

.content {
  margin-top: 60px; /* Espacio manual para compensar el header fijo */
}

En este caso, necesitamos añadir manualmente un margen superior al contenido para evitar que quede oculto detrás del encabezado fijo, ya que este último no reserva espacio en el flujo del documento.

Posicionamiento sticky: comportamiento híbrido

El posicionamiento sticky presenta un comportamiento único:

Inicialmente se comporta como relative (permanece en el flujo)
Se convierte en fixed cuando alcanza una posición específica durante el desplazamiento
Mantiene su espacio en el flujo incluso cuando se "fija"
Requiere al menos una propiedad de desplazamiento (top, right, bottom, left) para funcionar

.sticky-element {
  position: sticky;
  top: 20px; /* Se fijará a 20px del borde superior al desplazarse */
  background-color: #f1c40f;
  padding: 10px;
}

Este comportamiento híbrido hace que sticky sea ideal para elementos como encabezados de sección que deben permanecer visibles durante el desplazamiento sin alterar el flujo inicial del documento.

Comparación visual de los efectos en el flujo

Para entender mejor cómo cada tipo de posicionamiento afecta al flujo, consideremos este ejemplo comparativo:

.container {
  border: 1px solid #ccc;
  margin: 20px;
  padding: 10px;
}

.box {
  width: 80px;
  height: 80px;
  margin: 5px;
  background-color: #3498db;
  color: white;
  display: inline-block;
}

.static-box {
  position: static;
}

.relative-box {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #e74c3c;
}

.absolute-box {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: #9b59b6;
}

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #2ecc71;
}

.sticky-box {
  position: sticky;
  top: 10px;
  background-color: #f1c40f;
}

Impacto en el rendimiento y consideraciones prácticas

Los diferentes tipos de posicionamiento también tienen implicaciones en el rendimiento y la estructura del documento:

Los elementos con position: absolute o fixed crean una nueva capa de composición en el navegador, lo que puede afectar al rendimiento si se abusa de ellos.
Sacar elementos del flujo puede complicar la creación de diseños responsivos, ya que los elementos posicionados absolutamente no se adaptan naturalmente al tamaño del contenedor.
El posicionamiento absoluto y fijo puede causar problemas de accesibilidad si no se maneja correctamente, especialmente con el zoom del navegador.

/* Enfoque problemático */
.absolute-layout {
  position: absolute;
  width: 200px; /* Ancho fijo */
  top: 50px;
  left: 50px;
}

/* Enfoque más flexible */
.relative-layout {
  position: relative;
  width: 50%; /* Ancho relativo */
  margin: 0 auto;
}

Técnicas para compensar los efectos en el flujo

Cuando trabajamos con elementos fuera del flujo, a menudo necesitamos técnicas para compensar su ausencia:

Espaciado manual: Añadir márgenes o relleno para crear espacio donde estarían los elementos posicionados absolutamente.
Elementos fantasma: Crear elementos vacíos con las mismas dimensiones que los elementos posicionados absolutamente para mantener el espacio.
Contenedores de altura fija: Establecer alturas explícitas en los contenedores para evitar colapsos cuando los elementos hijos están fuera del flujo.

.card {
  position: relative;
  padding-bottom: 50px; /* Espacio para el botón posicionado absolutamente */
}

.card-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Anidamiento de contextos de posicionamiento

El anidamiento de elementos con diferentes tipos de posicionamiento crea una jerarquía que afecta cómo los elementos interactúan con el flujo:

.outer {
  position: relative;
  border: 2px solid #333;
  height: 300px;
}

.middle {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: rgba(52, 152, 219, 0.5);
}

.inner {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: rgba(231, 76, 60, 0.7);
}

En este ejemplo, .inner se posiciona en relación a .middle (no a .outer ni al documento), creando una cadena de contextos de posicionamiento que afecta al flujo de manera anidada.

Entender cómo cada tipo de posicionamiento afecta al flujo del documento es fundamental para crear diseños web efectivos y predecibles, permitiéndonos controlar con precisión la disposición de los elementos sin crear problemas inesperados en la estructura general de la página.

Diferencias entre posicionamiento y display

Cuando trabajamos con CSS, dos de las propiedades más importantes para controlar la disposición de los elementos son position y display. Aunque ambas afectan a cómo se muestran los elementos en la página, lo hacen de maneras fundamentalmente diferentes y con propósitos distintos.

Propósito fundamental

La propiedad position determina cómo se ubica un elemento en relación con el flujo del documento o su contenedor, permitiéndonos mover elementos a coordenadas específicas. Por otro lado, display define cómo se comporta un elemento en términos de su modelo de formato y cómo interactúa con los elementos circundantes.

/* Ejemplo de position */
.positioned-element {
  position: absolute;
  top: 20px;
  left: 30px;
}

/* Ejemplo de display */
.display-element {
  display: flex;
  justify-content: center;
}

Naturaleza del control

position ofrece un control preciso sobre las coordenadas de un elemento, mientras que display controla el comportamiento de renderizado y el modelo de caja del elemento.

Valores y comportamientos

Los valores de display incluyen opciones como:

block: El elemento ocupa todo el ancho disponible y genera saltos de línea
inline: El elemento ocupa solo el espacio necesario para su contenido
inline-block: Combina características de block e inline
flex: Establece un contenedor flexible para sus hijos
grid: Crea un sistema de cuadrícula bidimensional
none: Oculta completamente el elemento

Mientras que position tiene valores como:

static: Posicionamiento normal en el flujo del documento
relative: Posicionamiento relativo a su posición normal
absolute: Posicionamiento fuera del flujo, relativo al ancestro posicionado
fixed: Posicionamiento relativo a la ventana del navegador
sticky: Híbrido entre relative y fixed

Impacto en elementos circundantes

Una diferencia crucial es cómo afectan a los elementos vecinos:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
}

/* Con display: none, el elemento desaparece completamente */
.hidden-display {
  display: none;
}

/* Con visibility: hidden, el elemento es invisible pero mantiene su espacio */
.hidden-visibility {
  visibility: hidden;
}

/* Con position: absolute, el elemento sale del flujo pero sigue visible */
.absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: #e74c3c;
}

En este ejemplo:

.hidden-display desaparece completamente y no afecta al flujo
.hidden-visibility es invisible pero mantiene su espacio en el flujo
.absolute-box es visible pero no afecta al flujo del documento

Casos de uso típicos

display se utiliza principalmente para:

Definir cómo fluyen los elementos (bloque vs. en línea)
Crear sistemas de layout (flex, grid)
Controlar la visibilidad de elementos
Establecer el comportamiento de renderizado básico

.navigation {
  display: flex;
  justify-content: space-between;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

position se utiliza principalmente para:

Colocar elementos en coordenadas específicas
Superponer elementos
Crear elementos fijos como barras de navegación
Realizar ajustes finos en la ubicación

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Combinación de ambas propiedades

En muchos casos, necesitamos combinar position y display para lograr diseños complejos:

.dropdown {
  position: relative; /* Establece un contexto de posicionamiento */
  display: inline-block; /* Controla cómo se comporta en el flujo */
}

.dropdown-content {
  display: none; /* Inicialmente oculto */
  position: absolute; /* Fuera del flujo normal */
  top: 100%;
  left: 0;
  min-width: 200px;
}

.dropdown:hover .dropdown-content {
  display: block; /* Se muestra al pasar el ratón */
}

Este ejemplo muestra cómo ambas propiedades trabajan juntas para crear un menú desplegable:

display: inline-block hace que el contenedor del menú se comporte como un elemento en línea
position: relative crea un contexto de posicionamiento
position: absolute coloca el contenido desplegable fuera del flujo
display: none/block controla la visibilidad del contenido

Anidamiento y herencia

Otra diferencia importante es cómo se comportan con elementos anidados:

.flex-container {
  display: flex;
  justify-content: space-between;
}

/* Los hijos directos se convierten en flex-items automáticamente */
.flex-container > div {
  /* Heredan comportamiento flex */
}

.positioned-parent {
  position: relative;
}

/* Los hijos NO heredan el posicionamiento automáticamente */
.positioned-child {
  position: absolute; /* Necesita su propia declaración */
  top: 0;
  right: 0;
}

La propiedad display puede afectar directamente a los elementos hijos (como en flexbox o grid), mientras que position no se hereda, aunque el contexto de posicionamiento sí afecta a los hijos con posición absoluta.

Rendimiento y consideraciones prácticas

Desde el punto de vista del rendimiento:

Cambiar display puede provocar un recálculo completo del layout
Cambiar position (especialmente con absolute o fixed) puede ser más eficiente ya que saca el elemento del flujo normal

/* Puede causar recálculos significativos del layout */
.expensive {
  display: grid;
}

/* Generalmente más eficiente para animaciones */
.efficient-animation {
  position: absolute;
  transform: translateX(100px); /* Mejor que left: 100px para animaciones */
}

Responsividad

En diseños responsivos, estas propiedades se comportan de manera diferente:

Los layouts basados en display: flex o grid son inherentemente más adaptables
Los elementos con position: absolute o fixed pueden causar problemas en diferentes tamaños de pantalla si no se manejan correctamente

/* Diseño responsivo con display */
.responsive-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Posicionamiento que necesita ajustes para ser responsivo */
.positioned-element {
  position: absolute;
  top: 20px;
  right: 20px;
}

@media (max-width: 768px) {
  .positioned-element {
    position: static; /* Vuelve al flujo normal en pantallas pequeñas */
  }
}

Ejemplo práctico: Comparación directa

Veamos un ejemplo que ilustra claramente las diferencias:

<div class="container">
  <div class="box display-block">Block</div>
  <div class="box display-inline">Inline</div>
  <div class="box display-inline-block">Inline-block</div>
  <div class="box position-relative">Relative</div>
  <div class="box position-absolute">Absolute</div>
</div>

.container {
  position: relative;
  border: 2px solid #333;
  padding: 20px;
  height: 300px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
  color: white;
  text-align: center;
  padding: 10px;
}

.display-block {
  display: block;
  background-color: #2ecc71;
}

.display-inline {
  display: inline;
  background-color: #e74c3c;
  /* width y height no funcionan en elementos inline */
}

.display-inline-block {
  display: inline-block;
  background-color: #f39c12;
}

.position-relative {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #9b59b6;
}

.position-absolute {
  position: absolute;
  top: 40px;
  right: 40px;
  background-color: #1abc9c;
}

En este ejemplo:

.display-block ocupa todo el ancho disponible
.display-inline ignora width/height y fluye con el texto
.display-inline-block mantiene sus dimensiones pero fluye en línea
.position-relative se desplaza pero mantiene su espacio original
.position-absolute sale completamente del flujo y se posiciona según las coordenadas

Cuándo usar cada propiedad

Como regla general:

Usa display para definir el comportamiento fundamental de renderizado y crear sistemas de layout
Usa position para ajustes específicos de ubicación y superposiciones

Entender las diferencias entre estas dos propiedades es fundamental para crear diseños web efectivos y mantener un código CSS limpio y eficiente. Mientras que display define cómo se comporta un elemento en el flujo del documento, position nos permite controlar con precisión dónde se ubica ese elemento, ya sea dentro o fuera del flujo normal.

Aprende CSS online

Otros ejercicios de programación de CSS

Evalúa tus conocimientos de esta lección Propiedades de posicionamiento con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Aprende las propiedades de posicionamiento en CSS y cómo afectan al flujo del documento para crear diseños web precisos y efectivos.

Flujo normal del documento y concepto de posicionamiento

El concepto de posicionamiento en CSS

Posicionamiento estático (static)

Contexto de posicionamiento

Capas de visualización (z-index)

Position relative y sus coordenadas de desplazamiento

Sintaxis básica

Funcionamiento de las coordenadas de desplazamiento

Valores negativos

Combinación de coordenadas opuestas

Unidades de medida en las coordenadas

Ejemplo práctico: Ajuste fino de elementos

Ejemplo: Superposición controlada de elementos

Ejemplo: Creación de efectos visuales

Consideraciones importantes

Efectos del posicionamiento en el flujo del documento

Posicionamiento estático y su relación con el flujo

Posicionamiento relativo y su efecto en el flujo

Posicionamiento absoluto: saliendo del flujo

Posicionamiento fijo: independencia total del flujo

Posicionamiento sticky: comportamiento híbrido

Comparación visual de los efectos en el flujo

Impacto en el rendimiento y consideraciones prácticas

Técnicas para compensar los efectos en el flujo

Anidamiento de contextos de posicionamiento

Diferencias entre posicionamiento y display

Propósito fundamental

Naturaleza del control

Valores y comportamientos

Impacto en elementos circundantes

Casos de uso típicos

Combinación de ambas propiedades

Anidamiento y herencia

Rendimiento y consideraciones prácticas

Responsividad

Ejemplo práctico: Comparación directa

Cuándo usar cada propiedad

Otros ejercicios de programación de CSS

Todas las lecciones de CSS

Introducción Y Entorno

Introducción Y Entorno

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Posicionamiento

Flexbox

Flexbox

Flexbox

Flexbox

Css Grid

Css Grid

Diseño Responsive

Diseño Responsive

Diseño Responsive