CSS3: Position Sticky

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

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