How does "position: Sticky" work?

Asked

Viewed 4,514 times

18

The sticky is a new property value position and I read a little bit and understood that with it it is possible to create HTML elements that behave at a time like position: fixed and in another as position: relative depending on an offset value.

But I don’t understand how this works in practice, I would also like to know about compatibility, what support and when I will need prefixes like -webkit- and -moz-.

1 answer

6

There are several questions in one, let’s go by part.

  • But I don’t understand how this works in practice...

Here are two examples of sticky working Sticky 1. Sticky 02 Note that when performing the scrollfrom page a div at the top containing the accompanying description scroll and find another div it changes. What happens is that the element is treated as relative position: relative; until it reaches the specified limit, in the case of the examples top: 10px;, after that he is treated as fixed position: fixed;

  • I would also like to know about compatibility...

Chrome, I.E, Opera - Not supported; Firefox (Gecko) - Version 32 (32.0); Safari - Version 6.1 -webkit-

  • what support and when I will need prefixes like -webkit- and -moz-

Safari - Version 6.1 -webkit-

I suggest reading the documentation on Position

  • There are several, there are only 3 questions in one and at the end of the accounts 2 are technically the same, prefix and compatibility refer to the same situation, and property behavior is the basic question.

  • 4

    That part of the support is a little weird. http://caniuse.com/#feat=css-Sticky - and it’s Static and Fixed, nothing relative. It’s only relative when it comes to tables.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.