Fixed Positioning for Sticky UI Elements

Fixed positioning allows us to position an element relative to the viewport (the browser window) rather than relative to its parent element. It means that the element will always remain in the same position on the screen even if the user scrolls the page.

css
position: fixed;

It can be helpful when we create webpage navigation that will always be available for the user or when we need to permanently show some information on the screen. That's why let's have some practice and create the support chat button, which will always be in the bottom right corner of the viewport.

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, illo

neque dolore magnam nihil inventore eligendi cumque voluptatibus, voluptas

asperiores voluptatum? Harum expedita illum cumque fuga modi nostrum

deserunt mollitia, sint saepe quae quaerat rerum quasi odio ipsam vitae

nulla voluptas minus, eos enim tenetur. Cumque doloremque necessitatibus

neque voluptatum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi

laboriosam exercitationem ad delectus nemo veritatis, ipsum deleniti! Amet

libero quia tempora fugiat animi beatae, laborum a. In est repellendus

unde dicta sunt tempore officiis ad exercitationem necessitatibus

quibusdam voluptas magnam, repudiandae illum animi doloribus consectetur

provident nulla commodi! Molestiae perferendis, placeat fuga beatae, cum

ipsum laborum nam labore tempore magnam ipsam repudiandae debitis fugit

aut mollitia sit, doloremque aperiam cupiditate impedit dolore illo.

Commodi repellendus corporis eaque similique voluptas obcaecati, tenetur

ut magnam quis autem, sapiente possimus? Doloremque recusandae laboriosam

vel neque iste minus reprehenderit magni maiores, aliquam nesciunt qui?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque dolor

praesentium esse deserunt officiis quas asperiores magni animi rem iusto

commodi quo, incidunt nostrum natus porro reiciendis et aliquid eveniet

optio! Ullam, suscipit qui quis ipsam perferendis laborum laudantium?

Blanditiis soluta, necessitatibus itaque, deserunt beatae suscipit

dolores, consequuntur ex voluptate praesentium reprehenderit earum

corrupti quaerat cum hic! Nulla amet debitis minima accusamus. Modi, hic

qui, ex id fuga veritatis at velit quae illo nulla labore porro, ipsa esse

The chat button is always available for the user. It does not disappear on scroll. It was achieved only with the position: fixed; property.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat