CSS3: Position Sticky

Zoe Trinh
Posted by Zoe Trinh October 30, 2021

When making websites, sometimes we want an element to be stuck in the desired position without using javascript. In css3 there is a new value for the position property that can help you do that much faster and simpler. That’s sticky.

Use:

To use this property, you need to use the position: sticky property with values for top, right, bottom, left to define the distance for the element to stick to the desired position.

Ex

.sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
/left: 10px;/
/right: 20px;/
/bottom: 10px;/
}

Note:

However, there are some caveats when using this attribute:
You need to set the value position: relative to the parent element you want it to stick to
All tags that wrap around the tag you want to use this attribute for should not use overflow: hidden.

Example: 

.parent{
    position: relative;
}

.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

Check compatibility with browsers

Check compatibility with browsers

You can also check it out directly here: https://caniuse.com/css-sticky

Above is an introduction to the position sticky property.

Hope to be of help to you. Goodbye and see you again

Tags: