Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Posicionamiento Sticky para Diseños Dinámicos | Dominio del Posicionamiento en CSS
Técnicas Avanzadas de CSS

bookPosicionamiento Sticky para Diseños Dinámicos

La posición sticky combina aspectos de las posiciones relativa y fija. Cuando un elemento tiene posición sticky, se comporta como un elemento posicionado relativamente hasta que alcanza un cierto umbral en la página. En ese momento, cambia a comportarse como un elemento fijo.

position: sticky;

Consideremos la siguiente ilustración. El elemento con el contenido de texto I am sticky tiene la posición sticky.

Cuando un elemento está dentro de un contenedor, y el contenedor permanece dentro del viewport, el elemento se comporta como si estuviera posicionado relativamente. Sin embargo, cuando una parte del contenedor principal sale del viewport, el elemento queda fijo en su lugar mientras alguna parte del contenedor permanezca visible en la pantalla. Una vez que todo el contenedor sale del viewport, se reactiva la posición relativa y el elemento desaparece junto con el contenedor.

Realicemos una práctica y creemos un par de secciones con títulos sticky. Así, el usuario siempre podrá ver el título de la sección que está leyendo en ese momento, y luego este desaparecerá al hacer scroll.

index.html

index.html

index.css

index.css

copy

Nota

Es importante mencionar que debemos especificar la propiedad top o bottom, para que el navegador pueda entender dónde esperamos que se adhiera un elemento.

question mark

¿Cuál es el comportamiento del elemento con la propiedad position: sticky?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 8

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me an example of how to use sticky positioning with section titles?

What does the CSS look like for making section titles sticky?

Can you explain more about the importance of the `top` or `bottom` property with sticky positioning?

Awesome!

Completion rate improved to 2.04

bookPosicionamiento Sticky para Diseños Dinámicos

Desliza para mostrar el menú

La posición sticky combina aspectos de las posiciones relativa y fija. Cuando un elemento tiene posición sticky, se comporta como un elemento posicionado relativamente hasta que alcanza un cierto umbral en la página. En ese momento, cambia a comportarse como un elemento fijo.

position: sticky;

Consideremos la siguiente ilustración. El elemento con el contenido de texto I am sticky tiene la posición sticky.

Cuando un elemento está dentro de un contenedor, y el contenedor permanece dentro del viewport, el elemento se comporta como si estuviera posicionado relativamente. Sin embargo, cuando una parte del contenedor principal sale del viewport, el elemento queda fijo en su lugar mientras alguna parte del contenedor permanezca visible en la pantalla. Una vez que todo el contenedor sale del viewport, se reactiva la posición relativa y el elemento desaparece junto con el contenedor.

Realicemos una práctica y creemos un par de secciones con títulos sticky. Así, el usuario siempre podrá ver el título de la sección que está leyendo en ese momento, y luego este desaparecerá al hacer scroll.

index.html

index.html

index.css

index.css

copy

Nota

Es importante mencionar que debemos especificar la propiedad top o bottom, para que el navegador pueda entender dónde esperamos que se adhiera un elemento.

question mark

¿Cuál es el comportamiento del elemento con la propiedad position: sticky?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 8
some-alt