Maquetación Web - Lesson 7: Sticky

Next we're going to learn how to temporarily pin an element during scrolling, as you scroll, until it bumps into another element. In other words, it slides along until it collides with another element. It's as if the element had a magnet and slid along until it hit another element.

To achieve this we'll use position: sticky; together with top, a pair of properties that will slide the element as long as there is space. When the element collides with another element, it will stay fixed.

.elemento {
    top: 2rem;
    position: sticky;
}

As long as it has space within the parent, it will be able to pin itself. Below you can see the code for a full example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css" media="screen">
      body {
          margin: 0;
          font-family: arial;
      }
      code {
          color: #89D2DC;
      }

      .header, .footer {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin: 0;
          height: 100vh;
          background: #6564DB;
          color: white;
      }

      .container {
          display: flex;
          gap: 2rem;
          margin: 0 auto;
          max-width: 800px;
      }

      .aside__slider {
          top: 2rem;
          position: sticky;
          width: 10rem;
          margin: 2rem 0;
          background-color: #232ed1;
          color: white;
          padding: 2rem;
      }
    </style>
    </head>
    <body>
    <header class="header">
        <h1 class="titulo">Sticky Example</h1>
        <p>⬇️ Scroll down ⬇️</p>
    </header>
    <div class="container">
        <aside class="aside">
            <div class="aside__slider">
                <p>I have <code>position: sticky;</code> and <code>top: 2rem;</code></p>
            </div>
        </aside>
        <main class="main">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur assumenda consectetur
                corporis culpa dicta fugiat, illo, maiores maxime necessitatibus odit praesentium quaerat quia
                repellendus similique sit tempore? Hic, mollitia!</p>
            <p>Accusamus aut commodi eaque inventore magnam, magni minus nostrum numquam porro quaerat quidem quod
                tenetur, totam! Alias consequuntur cum deleniti dolore doloribus error expedita iusto possimus quaerat
                voluptas! Qui, velit.</p>
            <p>Architecto aut fugit nesciunt perspiciatis voluptatibus. A accusantium at consequatur ea eos excepturi id
                illo ipsam molestias praesentium provident quasi quibusdam quo reiciendis repellat, repellendus sequi
                totam vero. Illo, vero.</p>
            <p>Deleniti dolores error eveniet hic illo impedit labore laborum minima. Accusamus accusantium asperiores
                consequuntur debitis deserunt, dicta doloremque ducimus eligendi esse magnam modi, nam obcaecati optio
                quibusdam rerum suscipit temporibus?</p>
            <p>Alias aut, commodi distinctio hic magni nam nemo, nulla numquam placeat porro quasi quis rem similique
                soluta sunt voluptates, voluptatibus! Aliquid asperiores beatae eaque libero nostrum quasi quos sit
                suscipit.</p>
            <p>Ab ad aperiam consequatur cum deserunt ea eos facere harum id impedit incidunt ipsam ipsum necessitatibus
                optio quis quod, repudiandae sapiente tempora voluptates voluptatum. Blanditiis cumque est fugit
                perferendis sint?</p>
            <p>A amet atque commodi delectus, distinctio dolor dolore dolores doloribus eos ex hic illum ipsam magni
                minima molestiae nemo nihil non numquam obcaecati officiis pariatur quaerat, quam quia veniam
                veritatis.</p>
            <p>Aliquid, amet animi consectetur dignissimos eligendi est eveniet expedita fugiat id neque pariatur qui
                quia quibusdam, reprehenderit saepe similique totam! Accusantium cum eius eveniet iure obcaecati ratione
                recusandae saepe temporibus?</p>
            <p>A, autem consequuntur culpa debitis doloribus nesciunt odio perspiciatis rerum sed sit temporibus velit?
                Aspernatur corporis dolorem ducimus, eveniet fugiat hic impedit laudantium necessitatibus officia, quas
                recusandae similique, veritatis vero.</p>
            <p>A accusantium architecto, asperiores cum delectus, deleniti dignissimos dolorum esse eveniet expedita
                facilis laborum modi necessitatibus obcaecati officiis qui quisquam quo sequi ullam voluptatum. Debitis
                dolores doloribus et ex laborum!</p>
            <p>At cupiditate debitis, dolorem ex modi nulla quos totam ut velit vitae. Ad culpa debitis distinctio, enim
                eos exercitationem, illo illum nobis odio quisquam quos ratione reiciendis tempora veniam
                voluptates?</p>
            <p>A accusamus culpa nobis perferendis reprehenderit? Deserunt dolor expedita, in magni maiores maxime
                perferendis qui temporibus voluptatem voluptates? Aspernatur ea quasi voluptatum. Consectetur
                consequuntur dolorem doloribus esse possimus qui, temporibus.</p>
            <p>Beatae culpa cum debitis deleniti dolor doloribus dolorum ea eum facere, hic illo labore laboriosam
                placeat, quibusdam rerum tempora ut. Explicabo iste laboriosam natus neque nulla officiis placeat porro
                rerum?</p>
            <p>Adipisci aperiam asperiores aspernatur dicta dolore doloremque doloribus earum eveniet excepturi expedita
                illum iusto molestiae officiis quidem quisquam recusandae sapiente suscipit, tenetur vitae voluptatum!
                Doloremque earum est eveniet laudantium nostrum.</p>
            <p>Alias, consequatur earum, harum illo ipsa neque numquam optio quaerat qui quibusdam reprehenderit sint
                totam! Ad culpa cum delectus doloribus eligendi id nesciunt odio quos ut veniam? Commodi, libero
                sed.</p>
            <p>Ad aperiam consequatur cupiditate dignissimos dolores, enim excepturi facere fuga illum iure maxime
                mollitia nesciunt numquam omnis optio perspiciatis quam quia quis rem repellendus similique, tempore
                temporibus totam vel, velit.</p>
            <p>Assumenda aut deleniti est exercitationem illo iste itaque, libero minima numquam, officia quaerat sed
                sit, tenetur. Adipisci deleniti dolorum earum impedit magni, minima odio officiis quibusdam quis? Omnis,
                sit temporibus!</p>
            <p>Culpa eius enim error id in magni modi? Aperiam deserunt ea id ipsa iure ut voluptatibus. Aspernatur
                atque consequuntur, esse eveniet excepturi inventore iusto necessitatibus odit omnis provident soluta
                veniam!</p>
            <p>A accusamus, blanditiis commodi consequatur debitis dolorum ducimus ipsum iure iusto labore laborum
                laudantium molestiae natus necessitatibus nemo nihil nulla odio placeat quaerat quasi repudiandae sit
                soluta suscipit velit voluptatum.</p>
            <p>Amet dolorum in magni nemo odio porro quae soluta tempora, voluptas? Commodi ea illo quia? Ab labore
                quaerat quod sit ut! Aliquam consequuntur eius fugiat molestiae placeat! Adipisci, architecto,
                repellat.</p>
            <p>Amet beatae consequuntur deleniti dolor dolore et hic illo ipsam ipsum maiores nihil nisi nostrum numquam
                odit omnis, quam qui quibusdam recusandae reiciendis rem repellat repudiandae sequi sunt temporibus
                voluptatem!</p>
            <p>Aut beatae consequatur doloremque ea eligendi error facere ipsum laboriosam magni minus nam, natus nihil
                non, numquam, pariatur possimus quidem rem sunt voluptate voluptatum! Ab officiis sapiente voluptatibus.
                Esse, necessitatibus?</p>
            <p>Asperiores dicta iure soluta voluptates. Alias cumque deleniti dignissimos doloremque ea eligendi ex
                exercitationem facere impedit magni molestiae mollitia possimus quas, ratione reiciendis repellendus
                repudiandae suscipit tempora velit voluptatem. Dolorum.</p>
            <p>Deleniti doloribus fuga laborum nemo quae reiciendis rerum, sunt veniam. Consequatur, cumque cupiditate
                earum illum iure molestiae perferendis provident reiciendis. Animi enim impedit ipsum iste quasi. Animi
                ea repellendus saepe!</p>
            <p>Culpa dolorum et pariatur quas, quos sit. Aliquid atque debitis dignissimos enim sequi? Ad, molestiae
                sapiente! Cum distinctio dolorem ducimus laboriosam magnam necessitatibus nemo odit optio quibusdam
                sint. Alias, pariatur.</p>
            <p>Atque, commodi dolores eos iure neque possimus quo reprehenderit soluta vel veniam. At commodi cupiditate
                eius eos eveniet illo impedit necessitatibus nesciunt, officia pariatur perspiciatis quos sequi suscipit
                tempore vero!</p>
            <p>Accusamus consectetur debitis dignissimos ea eius eos harum in inventore, ipsam labore maxime modi
                molestiae, nesciunt odio perferendis porro sapiente sint soluta suscipit tempore vel veritatis
                voluptatum. Consectetur, exercitationem, odio.</p>
            <p>Accusamus dolorem facere fugiat praesentium quisquam reiciendis tempora vitae. Deserunt dolores error
                facere iste laudantium officiis pariatur quam quod! Aliquid delectus, doloribus eaque fugiat natus nisi
                vel? Excepturi, quisquam, veniam!</p>
            <p>Accusamus accusantium alias at consequuntur debitis dicta dolor dolorem ducimus eaque eos esse, facere
                fuga hic libero necessitatibus numquam odio omnis praesentium quaerat quas suscipit unde vel veniam,
                voluptas voluptatum?</p>
            <p>Consequatur cumque dolorem ducimus nihil repudiandae? Alias aliquam consequatur dignissimos dolor
                doloremque eos expedita facilis, illo impedit labore nesciunt officia, quae quia ratione sapiente! Autem
                error eum obcaecati sed sit.</p>
        </main>
    </div>
    <footer class="footer">
        That's all folks
    </footer>
</body>
</html>

Don't lose the space with fixed or absolute positioning

When we use position: fixed or position: absolute, the element is taken out of the page's normal flow and takes up no space. This can be a problem if we want the rest of the elements to behave as if the element were there. With sticky we can solve this.

header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}

Here is where my page's content begins

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur assumenda consectetur corporis culpa dicta fugiat, illo, maiores maxime necessitatibus odit praesentium quaerat quia repellendus similique sit tempore? Hic, mollitia!

Accusamus aut commodi eaque inventore magnam, magni minus nostrum numquam porro quaerat quidem quod tenetur, totam! Alias consequuntur cum deleniti dolore doloribus error expedita iusto possimus quaerat voluptas! Qui, velit.

Architecto aut fugit nesciunt perspiciatis voluptatibus. A accusantium at consequatur ea eos excepturi id illo ipsam molestias praesentium provident quasi quibusdam quo reiciendis repellat, repellendus sequi totam vero. Illo, vero.

Deleniti dolores error eveniet hic illo impedit labore laborum minima. Accusamus accusantium asperiores consequuntur debitis deserunt, dicta doloremque ducimus eligendi esse magnam modi, nam obcaecati optio quibusdam rerum suscipit temporibus?

Alias aut, commodi distinctio hic magni nam nemo, nulla numquam placeat porro quasi quis rem similique soluta sunt voluptates, voluptatibus! Aliquid asperiores beatae eaque libero nostrum quasi quos sit suscipit.

Ab ad aperiam consequatur cum deserunt ea eos facere harum id impedit incidunt ipsam ipsum necessitatibus optio quis quod, repudiandae sapiente tempora voluptates voluptatum. Blanditiis cumque est fugit perferendis sint?

A amet atque commodi delectus, distinctio dolor dolore dolores doloribus eos ex hic illum ipsam magni minima molestiae nemo nihil non numquam obcaecati officiis pariatur quaerat, quam quia veniam veritatis.

Aliquid, amet animi consectetur dignissimos eligendi est eveniet expedita fugiat id neque pariatur qui quia quibusdam, reprehenderit saepe similique totam! Accusantium cum eius eveniet iure obcaecati ratione recusandae saepe temporibus?

A, autem consequuntur culpa debitis doloribus nesciunt odio perspiciatis rerum sed sit temporibus velit? Aspernatur corporis dolorem ducimus, eveniet fugiat hic impedit laudantium necessitatibus officia, quas recusandae similique, veritatis vero.

A accusantium architecto, asperiores cum delectus, deleniti dignissimos dolorum esse eveniet expedita facilis laborum modi necessitatibus obcaecati officiis qui quisquam quo sequi ullam voluptatum. Debitis dolores doloribus et ex laborum!

At cupiditate debitis, dolorem ex modi nulla quos totam ut velit vitae. Ad culpa debitis distinctio, enim eos exercitationem, illo illum nobis odio quisquam quos ratione reiciendis tempora veniam voluptates?

A accusamus culpa nobis perferendis reprehenderit? Deserunt dolor expedita, in magni maiores maxime perferendis qui temporibus voluptatem voluptates? Aspernatur ea quasi voluptatum. Consectetur consequuntur dolorem doloribus esse possimus qui, temporibus.

Beatae culpa cum debitis deleniti dolor doloribus dolorum ea eum facere, hic illo labore laboriosam placeat, quibusdam rerum tempora ut. Explicabo iste laboriosam natus neque nulla officiis placeat porro rerum?

Adipisci aperiam asperiores aspernatur dicta dolore doloremque doloribus earum eveniet excepturi expedita illum iusto molestiae officiis quidem quisquam recusandae sapiente suscipit, tenetur vitae voluptatum! Doloremque earum est eveniet laudantium nostrum.

Alias, consequatur earum, harum illo ipsa neque numquam optio quaerat qui quibusdam reprehenderit sint totam! Ad culpa cum delectus doloribus eligendi id nesciunt odio quos ut veniam? Commodi, libero sed.

Ad aperiam consequatur cupiditate dignissimos dolores, enim excepturi facere fuga illum iure maxime mollitia nesciunt numquam omnis optio perspiciatis quam quia quis rem repellendus similique, tempore temporibus totam vel, velit.

Assumenda aut deleniti est exercitationem illo iste itaque, libero minima numquam, officia quaerat sed sit, tenetur. Adipisci deleniti dolorum earum impedit magni, minima odio officiis quibusdam quis? Omnis, sit temporibus!

Culpa eius enim error id in magni modi? Aperiam deserunt ea id ipsa iure ut voluptatibus. Aspernatur atque consequuntur, esse eveniet excepturi inventore iusto necessitatibus odit omnis provident soluta veniam!

A accusamus, blanditiis commodi consequatur debitis dolorum ducimus ipsum iure iusto labore laborum laudantium molestiae natus necessitatibus nemo nihil nulla odio placeat quaerat quasi repudiandae sit soluta suscipit velit voluptatum.

Amet dolorum in magni nemo odio porro quae soluta tempora, voluptas? Commodi ea illo quia? Ab labore quaerat quod sit ut! Aliquam consequuntur eius fugiat molestiae placeat! Adipisci, architecto, repellat.

Amet beatae consequuntur deleniti dolor dolore et hic illo ipsam ipsum maiores nihil nisi nostrum numquam odit omnis, quam qui quibusdam recusandae reiciendis rem repellat repudiandae sequi sunt temporibus voluptatem!

Aut beatae consequatur doloremque ea eligendi error facere ipsum laboriosam magni minus nam, natus nihil non, numquam, pariatur possimus quidem rem sunt voluptate voluptatum! Ab officiis sapiente voluptatibus. Esse, necessitatibus?

Asperiores dicta iure soluta voluptates. Alias cumque deleniti dignissimos doloremque ea eligendi ex exercitationem facere impedit magni molestiae mollitia possimus quas, ratione reiciendis repellendus repudiandae suscipit tempora velit voluptatem. Dolorum.

Deleniti doloribus fuga laborum nemo quae reiciendis rerum, sunt veniam. Consequatur, cumque cupiditate earum illum iure molestiae perferendis provident reiciendis. Animi enim impedit ipsum iste quasi. Animi ea repellendus saepe!

Culpa dolorum et pariatur quas, quos sit. Aliquid atque debitis dignissimos enim sequi? Ad, molestiae sapiente! Cum distinctio dolorem ducimus laboriosam magnam necessitatibus nemo odit optio quibusdam sint. Alias, pariatur.

Atque, commodi dolores eos iure neque possimus quo reprehenderit soluta vel veniam. At commodi cupiditate eius eos eveniet illo impedit necessitatibus nesciunt, officia pariatur perspiciatis quos sequi suscipit tempore vero!

Accusamus consectetur debitis dignissimos ea eius eos harum in inventore, ipsam labore maxime modi molestiae, nesciunt odio perferendis porro sapiente sint soluta suscipit tempore vel veritatis voluptatum. Consectetur, exercitationem, odio.

Accusamus dolorem facere fugiat praesentium quisquam reiciendis tempora vitae. Deserunt dolores error facere iste laudantium officiis pariatur quam quod! Aliquid delectus, doloribus eaque fugiat natus nisi vel? Excepturi, quisquam, veniam!

Accusamus accusantium alias at consequuntur debitis dicta dolor dolorem ducimus eaque eos esse, facere fuga hic libero necessitatibus numquam odio omnis praesentium quaerat quas suscipit unde vel veniam, voluptas voluptatum?

Consequatur cumque dolorem ducimus nihil repudiandae? Alias aliquam consequatur dignissimos dolor doloremque eos expedita facilis, illo impedit labore nesciunt officia, quae quia ratione sapiente! Autem error eum obcaecati sed sit.

You can see the code for the previous example below:

.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  /* The rest of the properties are for styling */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  background: #6564db;
  color: white;
}

<header class="header">
  <h1 class="titulo">Example of a header with Sticky</h1>
  <p>⬇️ Scroll down ⬇️</p>
</header>
<main class="main">
  <h2>Here is where my page's content begins</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur assumenda consectetur
    corporis culpa dicta fugiat, illo, maiores maxime necessitatibus odit praesentium quaerat quia
    repellendus similique sit tempore? Hic, mollitia!</p>
  <p>Accusamus aut commodi eaque inventore magnam, magni minus nostrum numquam porro quaerat quidem quod
    tenetur, totam! Alias consequuntur cum deleniti dolore doloribus error expedita iusto possimus quaerat
    voluptas! Qui, velit.</p>
  <p>Architecto aut fugit nesciunt perspiciatis voluptatibus. A accusantium at consequatur ea eos excepturi id
    illo ipsam molestias praesentium provident quasi quibusdam quo reiciendis repellat, repellendus sequi
    totam vero. Illo, vero.</p>
  <p>Deleniti dolores error eveniet hic illo impedit labore laborum minima. Accusamus accusantium asperiores
    consequuntur debitis deserunt, dicta doloremque ducimus eligendi esse magnam modi, nam obcaecati optio
    quibusdam rerum suscipit temporibus?</p>
  <p>Alias aut, commodi distinctio hic magni nam nemo, nulla numquam placeat porro quasi quis rem similique
    soluta sunt voluptates, voluptatibus! Aliquid asperiores beatae eaque libero nostrum quasi quos sit
    suscipit.</p>
  <p>Ab ad aperiam consequatur cum deserunt ea eos facere harum id impedit incidunt ipsam ipsum necessitatibus
    optio quis quod, repudiandae sapiente tempora voluptates voluptatum. Blanditiis cumque est fugit
    perferendis sint?</p>
  <p>A amet atque commodi delectus, distinctio dolor dolore dolores doloribus eos ex hic illum ipsam magni
    minima molestiae nemo nihil non numquam obcaecati officiis pariatur quaerat, quam quia veniam
    veritatis.</p>
  <p>Aliquid, amet animi consectetur dignissimos eligendi est eveniet expedita fugiat id neque pariatur qui
    quia quibusdam, reprehenderit saepe similique totam! Accusantium cum eius eveniet iure obcaecati ratione
    recusandae saepe temporibus?</p>
  <p>A, autem consequuntur culpa debitis doloribus nesciunt odio perspiciatis rerum sed sit temporibus velit?
    Aspernatur corporis dolorem ducimus, eveniet fugiat hic impedit laudantium necessitatibus officia, quas
    recusandae similique, veritatis vero.</p>
  <p>A accusantium architecto, asperiores cum delectus, deleniti dignissimos dolorum esse eveniet expedita
    facilis laborum modi necessitatibus obcaecati officiis qui quisquam quo sequi ullam voluptatum. Debitis
    dolores doloribus et ex laborum!</p>
  <p>At cupiditate debitis, dolorem ex modi nulla quos totam ut velit vitae. Ad culpa debitis distinctio, enim
    eos exercitationem, illo illum nobis odio quisquam quos ratione reiciendis tempora veniam
    voluptates?</p>
  <p>A accusamus culpa nobis perferendis reprehenderit? Deserunt dolor expedita, in magni maiores maxime
    perferendis qui temporibus voluptatem voluptates? Aspernatur ea quasi voluptatum. Consectetur
    consequuntur dolorem doloribus esse possimus qui, temporibus.</p>
  <p>Beatae culpa cum debitis deleniti dolor doloribus dolorum ea eum facere, hic illo labore laboriosam
    placeat, quibusdam rerum tempora ut. Explicabo iste laboriosam natus neque nulla officiis placeat porro
    rerum?</p>
  <p>Adipisci aperiam asperiores aspernatur dicta dolore doloremque doloribus earum eveniet excepturi expedita
    illum iusto molestiae officiis quidem quisquam recusandae sapiente suscipit, tenetur vitae voluptatum!
    Doloremque earum est eveniet laudantium nostrum.</p>
  <p>Alias, consequatur earum, harum illo ipsa neque numquam optio quaerat qui quibusdam reprehenderit sint
    totam! Ad culpa cum delectus doloribus eligendi id nesciunt odio quos ut veniam? Commodi, libero
    sed.</p>
  <p>Ad aperiam consequatur cupiditate dignissimos dolores, enim excepturi facere fuga illum iure maxime
    mollitia nesciunt numquam omnis optio perspiciatis quam quia quis rem repellendus similique, tempore
    temporibus totam vel, velit.</p>
  <p>Assumenda aut deleniti est exercitationem illo iste itaque, libero minima numquam, officia quaerat sed
    sit, tenetur. Adipisci deleniti dolorum earum impedit magni, minima odio officiis quibusdam quis? Omnis,
    sit temporibus!</p>
  <p>Culpa eius enim error id in magni modi? Aperiam deserunt ea id ipsa iure ut voluptatibus. Aspernatur
    atque consequuntur, esse eveniet excepturi inventore iusto necessitatibus odit omnis provident soluta
    veniam!</p>
  <p>A accusamus, blanditiis commodi consequatur debitis dolorum ducimus ipsum iure iusto labore laborum
    laudantium molestiae natus necessitatibus nemo nihil nulla odio placeat quaerat quasi repudiandae sit
    soluta suscipit velit voluptatum.</p>
  <p>Amet dolorum in magni nemo odio porro quae soluta tempora, voluptas? Commodi ea illo quia? Ab labore
    quaerat quod sit ut! Aliquam consequuntur eius fugiat molestiae placeat! Adipisci, architecto,
    repellat.</p>
  <p>Amet beatae consequuntur deleniti dolor dolore et hic illo ipsam ipsum maiores nihil nisi nostrum numquam
    odit omnis, quam qui quibusdam recusandae reiciendis rem repellat repudiandae sequi sunt temporibus
    voluptatem!</p>
  <p>Aut beatae consequatur doloremque ea eligendi error facere ipsum laboriosam magni minus nam, natus nihil
    non, numquam, pariatur possimus quidem rem sunt voluptate voluptatum! Ab officiis sapiente voluptatibus.
    Esse, necessitatibus?</p>
  <p>Asperiores dicta iure soluta voluptates. Alias cumque deleniti dignissimos doloremque ea eligendi ex
    exercitationem facere impedit magni molestiae mollitia possimus quas, ratione reiciendis repellendus
    repudiandae suscipit tempora velit voluptatem. Dolorum.</p>
  <p>Deleniti doloribus fuga laborum nemo quae reiciendis rerum, sunt veniam. Consequatur, cumque cupiditate
    earum illum iure molestiae perferendis provident reiciendis. Animi enim impedit ipsum iste quasi. Animi
    ea repellendus saepe!</p>
  <p>Culpa dolorum et pariatur quas, quos sit. Aliquid atque debitis dignissimos enim sequi? Ad, molestiae
    sapiente! Cum distinctio dolorem ducimus laboriosam magnam necessitatibus nemo odit optio quibusdam
    sint. Alias, pariatur.</p>
  <p>Atque, commodi dolores eos iure neque possimus quo reprehenderit soluta vel veniam. At commodi cupiditate
    eius eos eveniet illo impedit necessitatibus nesciunt, officia pariatur perspiciatis quos sequi suscipit
    tempore vero!</p>
  <p>Accusamus consectetur debitis dignissimos ea eius eos harum in inventore, ipsam labore maxime modi
    molestiae, nesciunt odio perferendis porro sapiente sint soluta suscipit tempore vel veritatis
    voluptatum. Consectetur, exercitationem, odio.</p>
  <p>Accusamus dolorem facere fugiat praesentium quisquam reiciendis tempora vitae. Deserunt dolores error
    facere iste laudantium officiis pariatur quam quod! Aliquid delectus, doloribus eaque fugiat natus nisi
    vel? Excepturi, quisquam, veniam!</p>
  <p>Accusamus accusantium alias at consequuntur debitis dicta dolor dolorem ducimus eaque eos esse, facere
    fuga hic libero necessitatibus numquam odio omnis praesentium quaerat quas suscipit unde vel veniam,
    voluptas voluptatum?</p>
  <p>Consequatur cumque dolorem ducimus nihil repudiandae? Alias aliquam consequatur dignissimos dolor
    doloremque eos expedita facilis, illo impedit labore nesciunt officia, quae quia ratione sapiente! Autem
    error eum obcaecati sed sit.</p>
</main>

Now we can use floating elements that flow within an empty space on the page or that don't affect the rest of the elements.