有没有办法让特定的div忽略它的父div的定位？ [英] Is there a way for a particular div to ignore it's parent div's positioning?

问题描述

我有一个div，它的位置被包含div的相对位置抛出。尽管取消父母的相对定位可以解决问题，但我们宁愿将其作为解决方案实施，因为它可能会破坏其他内容。有没有办法强迫孩子忽略其父母的定位？

因为它的父亲与CSS动态地进行相对定位。除非重新考虑布局，并且自从 position：fixed 不是你所追求的，你的选择是：

1. 手动补偿父母的定位。给孩子元素 position：relative ，并且偏移与父母的偏移完全相反需要再次输入确切的值）。最小的问题，但你现在必须记住手动同步两对偏移量（父母和孩子）。发表评论说：如果你改变了这一点，你也必须改变#THAT。


2. 用Javascript动态移动孩子。你可以执行一些计算布局完成后，将子元素移回到您想要的位置。不是一个干净的解决方案，它可能会导致一个简短的视觉跳跃，并且不适用于JavaScript禁用的人（让您的网站视觉上被破坏）。唯一的好处是它不需要维护，除非你的布局发生了根本性的变化。

总而言之， ＃2，并且只有当最佳解决方案（更改布局）不适用于您时。

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?

解决方案

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.

这篇关于有没有办法让特定的div忽略它的父div的定位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！