Html 有没有办法让特定的 div 忽略它的父 div 的定位？

Is there a way for a particular div to ignore it's parent div's positioning?

提问by josh

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?

我有一个 div，它的位置被它包含的 div 的相对定位所抛弃。虽然删除父项的相对定位可以解决问题，但我们宁愿不将其作为解决方案来实现，因为它可能会破坏其他东西。有没有办法强迫孩子忽略其父母的定位？

采纳答案by Jon

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:fixedis not what you are after, your options are:

不幸的是，没有办法使用 CSS 动态地使元素“补偿”其父元素的相对定位。除非重新考虑布局，因为position:fixed这不是您所追求的，您的选择是：

1. Manuallly compensate for parent's positioning.Give the child element position:relativeand 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.

1. 手动补偿父母的定位。为子元素提供position:relative与父元素完全相反的偏移量（您需要再次键入确切的值）。最小的麻烦，但您现在必须记住手动保持两对偏移量（对于父和子）同步。发表评论说“如果你改变这个，你也必须改变#THAT”会有所帮助。
2. 使用 Javascript 动态移动孩子。您可以在布局完成后执行一些计算并将子元素移回您想要的位置。至少不是一个干净的解决方案，它可能会导致短暂的视觉跳转，并且不适用于禁用 Javascript 的人（使您的网站在视觉上损坏）。唯一的好处是它不需要维护，除非您的布局发生根本变化。

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

总而言之，我建议在 #2 上做 #1，并且仅当您无法使用最佳解决方案（更改布局）时。

回答by William Hessel

If changing the "relative" to "static" is not a option for you...I agree with Jon, you must use javascript to positioning the child div, and here is a code using javascript to perform the option 2 of his answer, where I move the child to a real osition considering all the relative parent position:

如果将“相对”更改为“静态”不是您的选择……我同意乔恩的看法，您必须使用 javascript 来定位子 div，这里是使用 javascript 执行他的答案的选项 2 的代码，考虑到所有相对的父位置，我将孩子移动到一个真正的位置：

var div = document.getElementById("banner");
var parentDiv = document.getElementById("banner");
var posT = 0;
var posL = 0;

while(parentDiv = parentDiv.offsetParent){
   posT += parentDiv.offsetTop;
   posL += parentDiv.offsetLeft;
}
posT -= div.offsetTop;
posL -= div.offsetLeft;
div.style.top = (-1)*posT+"px";
div.style.left = (-1)*posL+"px";

 .corpo{
 
  position:relative;
  margin-left:100px;
  margin_top:100px;
  background-color:yellow;
        border:#ccc 1px solid;
        padding:10px;
 
 }
 #banner{
     
  position:absolute;
        top:250px; /* inicial value - goal position considering the document reference */
        left:150px; /* inicial value - goal position considering the document reference */
     width:50px;
  height:50px;
  background-color:blue;
        font-size:9px;
        color:white;
        font-family:Arial;
 }

asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
<div class="corpo">
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
 <div id="banner"  >
      <strong>Banner</strong><br/>
      top: 250px<br/> 
      left:150px
    </div>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br> 
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</div>