In this article, I show you how CSS position fixed property works and when you have to use position fixed value in your CSS. First, let’s understand what is CSS position fixed.
CSS Position Fixed
The CSS position fixed property is used to set an element’s position relative to the browser window, and it will remain in that fixed position even when the page is scrolled. It is commonly used for elements such as navigation bars or footers that should stay in the same position on the page at all times.
Below is an example of a CSS position fixed property-
nav {
position: fixed;
bottom: 0;
right: 0;
}
In this example, we have one nav element and it would position at the bottom right corner of the browser window and it will stay there even when the user scrolls the page.
The CSS “position: fixed” element will not affect the layout of other elements on the page. It is positioned relative to the browser window and will stay in the same place even if the page is scrolled by the user. It is a good way to create elements that stay on the screen while the rest of the content scrolls, such as a fixed header or footer.
CSS Position Fixed with Example
In the below example, I am creating one fixed sidebar using the CSS position fixed property.
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the position and dimensions of the sidebar */
aside {
position: fixed; /* Set the position to fixed */
top: 50px; /* Position the sidebar 50px from the top of the page */
left: 0; /* Position the sidebar at the left of the page */
width: 200px; /* Set the width of the sidebar */
height: calc(100% - 50px); /* Set the height of the sidebar */
background-color: #f2f2f2; /* Set the background color of the sidebar */
padding: 20px; /* Add some padding to the sidebar */
}
.main {
margin-left: 230px; /* Same as the width of the side nav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
</style>
</head>
<body>
<header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<aside>
<h3>Sidebar</h3>
<a href="#about">About</a>
</aside>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, augue
euismod blandit malesuada, ante odio posuere erat, id luctus nibh ligula id risus.
Sed dapibus risus eget nunc iaculis, ac malesuada elit condimentum.
Sed molestie, metus a euismod vestibulum, nunc nisi tincidunt quam,
id tincidunt orci velit vel velit. Sed velit velit, congue vel euismod id,
tristique id velit. Sed non nisl nisl. Sed a augue a nisl aliquet malesuada
eu quis nibh. Sed id malesuada ante, at porttitor ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, augue
euismod blandit malesuada, ante odio posuere erat, id luctus nibh ligula id risus.
Sed dapibus risus eget nunc iaculis, ac malesuada elit condimentum.
Sed molestie, metus a euismod vestibulum, nunc nisi tincidunt quam,
id tincidunt orci velit vel velit. Sed velit velit, congue vel euismod id,
tristique id velit. Sed non nisl nisl. Sed a augue a nisl aliquet malesuada
eu quis nibh. Sed id malesuada ante, at porttitor ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, augue
euismod blandit malesuada, ante odio posuere erat, id luctus nibh ligula id risus.
Sed dapibus risus eget nunc iaculis, ac malesuada elit condimentum.
Sed molestie, metus a euismod vestibulum, nunc nisi tincidunt quam,
id tincidunt orci velit vel velit. Sed velit velit, congue vel euismod id,
tristique id velit. Sed non nisl nisl. Sed a augue a nisl aliquet malesuada
eu quis nibh. Sed id malesuada ante, at porttitor ipsum.</p>
</div>
</body>
</html>
Copy and paste the above HTML code in notepad and save the file with the .html extension and open the same a sidebar will appear like below.
Output –
The sidebar is fixed to the left of the page, 50 pixels from the top, and has a height that is the full height of the page minus the height of the header. The main content is not affected by the sidebar’s position and will scroll as the user scrolls the page.
Conclusion
This is how you can use the CSS position fixed property to create a fixed element on the page that will not move when the user scrolls the page.