CSS Tip: Fixed positioning inside a relative container

1 minute read

This is a quick tip on how you can position an element as fixed inside its relative container as opposed to it being relative to the browser window.

When you use position: fixed and specify a top and or left position, you'll find that the element will be fixed relative to the window, and not to any other element of position: relative.

There is a way around this and that is not to specify top and left positions but instead to use margin-left and margin-top on the position: fixed element. You'll now find you can have an element fixed and relative to its container and not the browser window.

Written by Simon Bos (Creative Director). Read more in Insights by Simon or check our their socials Twitter, Instagram