Summary  
This chapter covers the CSS position: fixed property, which positions an element relative to the viewport so that it remains in the same place even when the user scrolls.  

General domain of usage  
Web UI components (e.g., sticky navigation or support chat buttons)

**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.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTm9iaXMsIGlsbG8KICAgICAgbmVxdWUgZG9sb3JlIG1hZ25hbSBuaWhpbCBpbnZlbnRvcmUgZWxpZ2VuZGkgY3VtcXVlIHZvbHVwdGF0aWJ1cywgdm9sdXB0YXMKICAgICAgYXNwZXJpb3JlcyB2b2x1cHRhdHVtPyBIYXJ1bSBleHBlZGl0YSBpbGx1bSBjdW1xdWUgZnVnYSBtb2RpIG5vc3RydW0KICAgICAgZGVzZXJ1bnQgbW9sbGl0aWEsIHNpbnQgc2FlcGUgcXVhZSBxdWFlcmF0IHJlcnVtIHF1YXNpIG9kaW8gaXBzYW0gdml0YWUKICAgICAgbnVsbGEgdm9sdXB0YXMgbWludXMsIGVvcyBlbmltIHRlbmV0dXIuIEN1bXF1ZSBkb2xvcmVtcXVlIG5lY2Vzc2l0YXRpYnVzCiAgICAgIG5lcXVlIHZvbHVwdGF0dW0uCiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRWxpZ2VuZGkKICAgICAgbGFib3Jpb3NhbSBleGVyY2l0YXRpb25lbSBhZCBkZWxlY3R1cyBuZW1vIHZlcml0YXRpcywgaXBzdW0gZGVsZW5pdGkhIEFtZXQKICAgICAgbGliZXJvIHF1aWEgdGVtcG9yYSBmdWdpYXQgYW5pbWkgYmVhdGFlLCBsYWJvcnVtIGEuIEluIGVzdCByZXBlbGxlbmR1cwogICAgICB1bmRlIGRpY3RhIHN1bnQgdGVtcG9yZSBvZmZpY2lpcyBhZCBleGVyY2l0YXRpb25lbSBuZWNlc3NpdGF0aWJ1cwogICAgICBxdWlidXNkYW0gdm9sdXB0YXMgbWFnbmFtLCByZXB1ZGlhbmRhZSBpbGx1bSBhbmltaSBkb2xvcmlidXMgY29uc2VjdGV0dXIKICAgICAgcHJvdmlkZW50IG51bGxhIGNvbW1vZGkhIE1vbGVzdGlhZSBwZXJmZXJlbmRpcywgcGxhY2VhdCBmdWdhIGJlYXRhZSwgY3VtCiAgICAgIGlwc3VtIGxhYm9ydW0gbmFtIGxhYm9yZSB0ZW1wb3JlIG1hZ25hbSBpcHNhbSByZXB1ZGlhbmRhZSBkZWJpdGlzIGZ1Z2l0CiAgICAgIGF1dCBtb2xsaXRpYSBzaXQsIGRvbG9yZW1xdWUgYXBlcmlhbSBjdXBpZGl0YXRlIGltcGVkaXQgZG9sb3JlIGlsbG8uCiAgICAgIENvbW1vZGkgcmVwZWxsZW5kdXMgY29ycG9yaXMgZWFxdWUgc2ltaWxpcXVlIHZvbHVwdGFzIG9iY2FlY2F0aSwgdGVuZXR1cgogICAgICB1dCBtYWduYW0gcXVpcyBhdXRlbSwgc2FwaWVudGUgcG9zc2ltdXM/IERvbG9yZW1xdWUgcmVjdXNhbmRhZSBsYWJvcmlvc2FtCiAgICAgIHZlbCBuZXF1ZSBpc3RlIG1pbnVzIHJlcHJlaGVuZGVyaXQgbWFnbmkgbWFpb3JlcywgYWxpcXVhbSBuZXNjaXVudCBxdWk/CiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRG9sb3JlbXF1ZSBkb2xvcgogICAgICBwcmFlc2VudGl1bSBlc3NlIGRlc2VydW50IG9mZmljaWlzIHF1YXMgYXNwZXJpb3JlcyBtYWduaSBhbmltaSByZW0gaXVzdG8KICAgICAgY29tbW9kaSBxdW8sIGluY2lkdW50IG5vc3RydW0gbmF0dXMgcG9ycm8gcmVpY2llbmRpcyBldCBhbGlxdWlkIGV2ZW5pZXQKICAgICAgb3B0aW8hIFVsbGFtLCBzdXNjaXBpdCBxdWkgcXVpcyBpcHNhbSBwZXJmZXJlbmRpcyBsYWJvcnVtIGxhdWRhbnRpdW0/CiAgICAgIEJsYW5kaXRpaXMgc29sdXRhLCBuZWNlc3NpdGF0aWJ1cyBpdGFxdWUsIGRlc2VydW50IGJlYXRhZSBzdXNjaXBpdAogICAgICBkb2xvcmVzLCBjb25zZXF1dW50dXIgZXggdm9sdXB0YXRlIHByYWVzZW50aXVtIHJlcHJlaGVuZGVyaXQgZWFydW0KICAgICAgY29ycnVwdGkgcXVhZXJhdCBjdW0gaGljISBOdWxsYSBhbWV0IGRlYml0aXMgbWluaW1hIGFjY3VzYW11cy4gTW9kaSwgaGljCiAgICAgIHF1aSwgZXggaWQgZnVnYSB2ZXJpdGF0aXMgYXQgdmVsaXQgcXVhZSBpbGxvIG51bGxhIGxhYm9yZSBwb3JybywgaXBzYSBlc3NlCiAgICAgIG5vYmlzIGFzcGVybmF0dXIuCiAgICA8L3A+CiAgICA8YnV0dG9uPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9jaGF0K2ltYWdlK2Zvcit0aGUrcnVubmFibGUrZXhhbXBsZS5wbmciCiAgICAgICAgYWx0PSJjaGF0IGljb24iCiAgICAgICAgd2lkdGg9IjU2cHgiCiAgICAgIC8+CiAgICA8L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4=

YnV0dG9uIHsKICAvKiBUaGlzIGNoYXB0ZXIgZm9jdXMgKi8KICBwb3NpdGlvbjogZml4ZWQ7CiAgYm90dG9tOiAxMHB4OwogIHJpZ2h0OiAxMHB4OwoKICAvKiByZW1vdmUgZGVmYXVsdCBidXR0b24gYmVoYXZpb3IgKi8KICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBib3JkZXI6IG5vbmU7CiAgY3Vyc29yOiBwb2ludGVyOwp9

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

What is the behavior of the `position: fixed` property?

Level up your styling skills by mastering advanced CSS techniques for modern web design. Position and manage elements with precision using advanced positioning strategies. Create smooth transitions and engaging animations to enhance user experience. Transform and manipulate elements for dynamic visual effects. Build responsive designs that adapt across devices and learn to streamline your workflow with CSS preprocessors like Sass.

Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?

Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow. 

Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.

Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.

Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.

The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.

Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.

Fixed Positioning for Sticky UI Elements