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 apposed 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.