8.1 Flujo normal
La posición de los elementos en CSS juega un papel clave en la gestión de su ubicación e interacción en una página web. Define cómo se colocan los elementos en relación con otros elementos y con su contenedor. Veamos cómo los diferentes tipos de posicionamiento afectan el flujo de los elementos.
Flujo de documento y posicionamiento
Los elementos en el flujo normal del documento se colocan uno tras otro en el orden definido por el marcado HTML. Los elementos de bloque
(por ejemplo, <div>, <p>, <h1>) se colocan verticalmente,
ocupando todo el ancho del contenedor padre, mientras que los elementos en línea (por ejemplo, <span>, <a>, <em>)
se colocan horizontalmente, ocupando sólo el espacio necesario.
Ejemplo:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Elemento de bloque</div>
<span class="inline">Elemento en línea</span>
<span class="inline">Elemento en línea</span>
8.2 Impacto del posicionamiento en el flujo del documento
Diferentes tipos de posicionamiento pueden cambiar el flujo normal del documento. Veamos cómo sucede esto:
Posicionamiento static
El posicionamiento static es el valor predeterminado y no cambia el flujo normal del documento. Los elementos
con position: static se colocan en el orden definido por el marcado HTML.
Impacto en el flujo:
- Los elementos permanecen en el flujo normal
- Los elementos se colocan uno tras otro según su orden en el HTML
Posicionamiento relative
Los elementos con position: relative permanecen en el flujo normal, pero pueden ser desplazados con respecto a su
posición normal utilizando las propiedades top, right, bottom, left.
El desplazamiento no afecta la posición de otros elementos.
Impacto en el flujo:
- Los elementos permanecen en el flujo normal
- El desplazamiento del elemento no cambia la ubicación de los elementos vecinos
Posicionamiento absolute
Los elementos con position: absolute se eliminan del flujo normal del documento y se colocan en relación con el
ancestro posicionado más cercano. Si no hay tal ancestro, se colocan en relación con el contenedor inicial
(normalmente es <html> o <body>).
Impacto en el flujo:
- Los elementos se eliminan del flujo normal
- Se posicionan en relación con el ancestro posicionado más cercano
- Otros elementos se comportan como si estos elementos no existieran
Posicionamiento fixed
Los elementos con position: fixed se eliminan del flujo normal y se colocan en relación con la ventana del navegador.
Permanecen en su lugar al desplazar la página.
Impacto en el flujo:
- Los elementos se eliminan del flujo normal
- Se posicionan en relación con la ventana del navegador
- Permanecen en su lugar al desplazar la página
- Otros elementos se comportan como si estos elementos no existieran
Posicionamiento sticky
Los elementos con position: sticky se comportan como posicionalmente relativos hasta que alcanzan un
umbral de desplazamiento especificado, después de lo cual se vuelven fijos.
Impacto en el flujo:
- Los elementos permanecen en el flujo normal hasta que alcanzan el umbral de desplazamiento
- Una vez alcanzado el umbral, el elemento se fija y ya no afecta el flujo normal
8.3 Ejemplos visuales de impacto en el flujo
1. Ejemplo con posicionamiento fijo:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Elemento fijo</div>
<div class="content">Contenido desplazable
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Ejemplo con posicionamiento sticky:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Elemento sticky</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION