Question

I have a div whose position is thrown off by its containing div’s relative positioning. While removing the parent’s relative positioning fixes the issue, we would rather not implement this as a solution since it might break other stuff. Is there a way to force the child to ignore its parent’s positioning?

Answer 1

Unfortunately there’s no way to make an element “compensate” for its parent’s relative positioning dynamically with CSS. Barring rethinking the layout and since position:fixed is not what you are after, your options are:

1. Manuallly compensate for parent’s positioning. Give the child element position:relative and offsets exactly opposite from what the parent has (you will need to key in the exact values again). Minimum fuss, but you now have to remember to keep the two pairs of offsets (for parent and child) in sync manually. Placing a comment saying “if you change this you also have to change #THAT” will help.
2. Dynamically move the child with Javascript. You can perform some calculations after layout is done and move the child element back to where you want it to be. Not a clean solution in the least, it might result in a brief visual jump and will not work for people with Javascript disabled (leaving your site visually broken). The only upside is that it needs no maintenance unless your layout changes radically.

All in all, I ‘d recommend doing #1 over #2, and only if the best solution (changing the layout) is not available to you.