position: fixed is not working? Here is a checklist for you

30/09/2019

HTML, CSS

When I make a website, I want to make elements fixed — like nav bar on the top of the page, footer on the bottom or fixed background. But I often come across an issue that position: fixed is not working.

Checkpoint 1

Does parent element have position: relative or absolute?

You might have specified the parent element as position: relative or absolute for some reason. But the child element may not be fixed in that case.

The best way is just to remove the position from the parent element — but some cases you don’t want to remove it.

Solution

Simply wrap the child element that you want it to be fixed with a tag ( like <div> ).

Checkpoint 2

Does parent element have ‘transform’ in its style?

When the parent element is able to change its shape, their child element is not able to fix the position.

Solution

Same as Reason 1. Just wrap the child element that you want it to be fixed with a tag ( like <div> ) — if you don’t want to remove transform style from the parent element.

Checkpoint 3

Is position: fixed specified its location?

It’s likely to forget specifying its location for position: fixed — such as top: 0 or left: 0. Without specifying the location, it can work for some of the browsers but not for all.

Solution

Always write them even though it seems working without it.

Conclusion

It is confusing especially if you have set animation with JavaScript, and you might believe that the reason is inside JS. It’s hard to see what’s right under your nose — so that I recommend checking CSS and HTML first.

If you have any question or suggestion to this article, please let me know via contact form. I would be delighted to hear from you!