Search code examples
jqueryhtmlcsspositioning

Fixed div outside of parent element


I am currently working on converting a website from a static desktop layout to a more mobile friendly design. I am currently converting a sidebar of content into a fullscreen modal type window but I am having the current problem. Can you position a fixed div (child of the sidebar element) on top of the entire body, i.e. as a direct descendant of the body.

I am tearing my hair out over this, the only success I am having is by cloning the element and putting it as a child of the body element.


Solution

  • Yes. If the path from your fixed element up to <body> does not contain any position:absolute containers, then your fixed element will be placed ontop of all other. Assuming no other elements with a higher z-index are rendered ontop that is.

    If, on the other hand, any container is absolute positioned, the fixed element will take that as the relative parent.

    Note: This is the default behaviour. It may vary depending on your markup. But without any code example it's impossible to tell.