108

The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example.

I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/position and a few other articles, but I still don't get it.

1
  • In case this question is still receiving traffic, position: sticky is commonplace now and as far as I understand, its mechanics haven't changed much from the time this question was asked. That said, someone else should provide an up-to-date answer.
    – BoltClock
    Commented Oct 22, 2021 at 10:51

6 Answers 6

72

position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.

Without going into specific details, position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.

The reason why I want to avoid going into details is because position: sticky is brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: sticky yet anyway (hopefully this will change within the next year).

Mozilla recently presented its implementation of position: sticky here. It's highly worth a watch.

5
  • 1
    I'm using position:sticky, and at first it works fine... goes from relative appearance to fixed. But on a longer page, eventually when I scroll down long enough, the sticky header disappears like other page objects.
    – Kalnode
    Commented Dec 9, 2017 at 0:07
  • 2
    Sticky looks very cool and handy. Hope it will be implemented to all browsers soon. I have seen this effect in some websites but is created with javascript. with sticky it can reduce the amount of code and complexity.
    – Babulaas
    Commented Feb 23, 2018 at 10:09
  • 1
    @MarsAndBack The header has to be a direct child of <body> if you want it to always stay on the screen, because sticky elements stick around no longer than their parents.
    – wizzwizz4
    Commented Feb 15, 2020 at 13:43
  • 1
    The last link is dead. Commented Oct 22, 2021 at 9:10
  • @NearHuscarl: That's no good. I can't find any surviving copies, not even on archive.org. Let me ask around.
    – BoltClock
    Commented Oct 22, 2021 at 10:33
61

See this self-explanatory example for better clarity. CODEPEN

Fixed Position:

  1. An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.

  2. It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).

  3. If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).

Sticky Position:

  1. An element with sticky position is positioned based on the user's scroll position. As @Boltclock mentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.

  2. It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).

  3. If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.

So if you want to achieve the fixed functionality but inside a container, use sticky.

1
44

Let me make it extremely simple.

fixed position will not occupy any space in the body, so the next element(eg: an image) will be behind the fixed element.

sticky position occupies the space, so the next element will not be hidden behind it.

Following image is fixed some part of image is hidden behind navbar, because Fixed element doesn't occupy space. You can solve this by adding margin or before/ after pseudo classes

enter image description here

This eg is of sticky position. Here Image is fully shown, nothing is hidden behind navbar because sticky elements occupy space in the document. enter image description here

6

Suppose you have a navigation bar at the top of your website and you want it to be fixed so that as you scroll down the page, it's always visible.

If you give it position: fixed; then the page content at the top will be hidden below the navigation bar. In contrast, if you decide to give it position: sticky; top: 0;, the navigation bar will remain in the flow of the document, and gracefully pushes the content underneath it below, so no content is hidden.

When you apply position: fixed; the navigation bar escapes from the normal document flow, similarly to when you float an element.

0
0
  1. fixed get fixed on both X and Y axis while sticky is fixed on X axis only.
  2. sticky will be fixed only till the end of the container, but fixed will be fixed until the end of the webpage.
0

Fixed and Sticky both are very similar but there is one important difference between them -

1. position:fixed : It will directly fixed the element at provided location using top,bottom,left,right.

<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>

- here paragraph with fixed position will fixed always at top:0px.

2. position:sticky : It will not directly fixed the element at provided location. It will move element with scroll initially. It will fixed the element only if element reached to specified location using top,bottom,left,right. Until it will move with scroll.

<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>

- here paragraph with sticky position will fixed or stick only if element will reached to top 0px position.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.