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