Sticky and fixed positioning properties in CSS

The sticky and fixed positioning properties in CSS

In web development, we often encounter situations where we need to fix the position of elements. There are two common positioning properties in CSS, sticky and fixed, which help us achieve fixed positioning effects for elements. This article will explain the differences between sticky and fixed and how to use them correctly.

1. Fixed Positioning

Fixed positioning fixes the position of an element relative to the browser window. Regardless of how the user scrolls, the element remains in the specified position. Typically, fixed positioning is achieved by setting position: fixed.

1.1 How to use

.fixed-element {
position: fixed;
top: 10px; /* 10px from the top of the browser window */
left: 50%; /* 50% from the left of the browser window */
transform: translateX(-50%); /* Center the element horizontally */
}

1.2 Applicable Scenarios

Navigation bar fixed to the top of the page
Back to top button fixed to the bottom right corner of the page
Sidebar fixed to a specific position on the page

1.3 Notes

Because fixed positioning is relative to the browser window, when using fixed positioning, ensure that the element displays correctly on various screen sizes.
Excessive fixed elements can easily cause page lag and take up too much space, so use with caution.

2. Sticky Positioning

Sticky positioning is a combination of relative and fixed positioning. An element is fixed only when it is within a certain distance from a container (specified with position: sticky). Unlike fixed positioning, the element remains fixed within the container when the page is scrolled to the specified position. Typically, sticky positioning is achieved by setting position: sticky.

2.1 Usage

.sticky-element {
position: -webkit-sticky; /* Compatibility */ 
position: sticky; 
top: 10px; /* 10px from the top of the specified container */ 
}

2.2 Applicable Scenarios

The filter bar in a list page is fixed to the top of the page
The table header is fixed to the top of the page as the user scrolls
The page header navigation is fixed to the top after scrolling to a certain position

2.3 Notes

When using sticky positioning, make sure to set the top, bottom, left, and right values, otherwise the element will not be fixed properly.
For scenarios where compatibility is a concern, you can use -webkit-sticky to enhance compatibility.

3. Differences Between the Two

Fixed positioning maintains a fixed position relative to the browser window and does not change with page scrolling. This is suitable for elements that need to remain in a specific position on the screen.
Sticky positioning maintains a fixed position relative to a specific container and changes with page scrolling. This is suitable for elements that need to remain fixed only after the page has scrolled to a certain position.

4. Sample code

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Sticky vs. Fixed</title> 
<style> 
.container { 
height: 1500px; 
} 

.sticky-container { 
position: -webkit-sticky; 
position: sticky; 
top: 10px; 
background-color: lightblue; 
padding: 10px; 
} 

.fixed-element { 
position: fixed; 
top: 10px; 
left: 50%; 
transform: translateX(-50%); 
background-color: lightcoral; 
padding: 10px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="sticky-container">
<h3>This is a sticky element</h3>
</div>

<div class="fixed-element">
<h3>This is a fixed element</h3>
</div>

</div>

</body>

</html>

5. Run Results

Open the above sample code in a browser and you’ll see one element with a sticky effect and one with a fixed effect. As the page scrolls, the sticky element stays fixed in place, while the fixed element remains centered at the top of the screen.

In summary, fixed positioning is suitable for elements that need to remain in a specific position on the screen, while sticky positioning is suitable for elements that need to be fixed after scrolling. By using these two positioning properties appropriately, you can achieve optimal display effects for page elements in different situations.