CSS固定/绝对定位到更早的亲戚？

Question

I have a sort of super special-case here I guess.

I'm working with many includes. Right now I'm coding in an included content-file. There I need a lightbox which has a 20% black background covering the whole page, including the header which is fixed itself and set in prior PHP files to z-index 200.

The #overlay-wrapper is, because of these includes, placed in #content , which is for other reasons position: relative . The wrapper has 100% width and height and z-index of 1000. Still, logically, it only covers the content-area and not the whole viewport.

Basically I now need a way to tell the #overlay-wrapper to be positioned relatively to the body without telling the content not to be relative, because as mentioned I need it to be relative in other cases.

Putting the overlay in another file would be a pain and I'm just curious if it's possible to tell a box to be positioned relatively to an "earlier" parent and not just the first he finds.

Answer 1

As long as #overlay-wrapper is within #content and #content is relatively positioned, #overlay-wrapper will always be positioned relative to #content . There is no way to work around this without relocating #overlay-wrapper in the DOM.

You will need to move #overlay-wrapper out of #content , either by modifying your PHP includes (by perhaps even moving it to a separate include of its own and including that elsewhere), or by using JavaScript to relocate it on page load.