CSS-Fixed
2 min readDec 30, 2022
‘fixed’ is one of the values of the position attribute. Every element follows the flow of the html meaning that each element is rendered after what comes before it in the coding. ‘fixed’ gets an element out of the flow and enable us to put the element where we want without regarding to other elements.
How to use it?
First, let’s see some of attributes that works with ‘fixed’
- top: a distance from the top of the root
- bottom: a distance from the bottom of the root
- left: a distance from the left of the root
- right: a distance from the right of the root
<!DOCTYPE html>
<html>
<head>
<title>Fixed</title>
</head>
<body>
<div style="height:3000px; width:100%; background-color:#efefef;">
<p style="font-size:5rem; position:fixed; top: 0; right: 6px;">Fixed</p>
</div>
</body>
</html>The difference between fixed and absolute is that fixed is relative to the window (screen) not other elements. For this reason ‘fixed’ is great for side navigation or modals.
Conclusion
We have seen the fixed value of CSS position in this writing.
References
