有没有一种方法可以让一个特定的 div 忽略其父 div 的定位？

Question

我有一个

元素，其位置受到包含它的

元素相对定位的影响。尽管删除父元素的相对定位可以解决此问题，但我们不想将其作为解决方案实施，因为这可能会破坏其他内容。是否有一种方法可以强制子元素忽略其父元素的定位？

- josh

---

忽略父元素的定位方式？position:fixed可以实现，但这可能不是你想要的。 - Jon

@Jon 对的，因为子 div 在某种程度上依赖于其父元素。我想我更具体地指的是忽略父元素相对定位中发生的任何变化 - 让子元素表现得好像父元素具有静态定位一样。 - josh

@ibu 我同意，但不幸的是这不是我的网站。 - josh

如果您不希望div受到父级div的影响，为什么不将其单独放在代码外面和下面？编辑：您是否有代码示例和您尝试过的更改？ - Biotox

@jblasco如果top和left是变量怎么办？我能否获取父元素的值并*= -1？ - josh

Answer 1

很遗憾，无法使用CSS动态使元素"补偿"其父元素的相对定位。除非重新设计布局并且position:fixed不是你需要的，否则你的选择有：

1. 手动补偿父元素的定位。 给子元素设置position:relative和与父元素完全相反的偏移量(你需要再次输入准确的值)。最小的麻烦是，现在你必须记住手动同步两对偏移量（父元素和子元素）。放置一个注释说“如果你更改了这个，你也必须更改#THAT”会有所帮助。
2. 使用JavaScript动态移动子元素。可以在布局完成后执行一些计算，并将子元素移回到您想要的位置。这不是一个干净的解决方案，可能会导致短暂的视觉跳跃，并且对于禁用Javascript的人不起作用（留下您的网站视觉上出现问题）。唯一的好处是它不需要维护，除非你的布局发生了根本性变化。

总之，我建议选择#1而不是#2，只有当最佳解决方案（改变布局）对您不可用时才使用其他解决方案。

- Jon

---

好的，你说用JavaScript实现2。但是也许你可以推荐一些使用JavaScript的解决方案？例如jQuery。谢谢。 - Павел Иванов

@ПавелИванов：要做什么解决方案？如果您有具体的问题，为什么不提出自己的问题呢？ :-) - Jon

如果你改变了这个，你也必须改变 #THAT。对于使用现代浏览器的人来说，可以使用“CSS自定义属性”来提供需要更改的单个参数。https://caniuse.com/css-variables - Lovethenakedgun

Answer 2

如果将“relative”更改为“static”不是您的选择...我同意Jon的观点，您必须使用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>

- William Hessel