相对于页面而不是第一个定位的祖先定位嵌套的 DIV答案

【问题标题】：Positioning a nested DIV relative to the page and not the first positioned ancestor相对于页面而不是第一个定位的祖先定位嵌套的 DIV
【发布时间】：2016-04-22 03:29:40
【问题描述】：

当它有一个定位的祖先时，是否有任何方法可以相对于页面定位嵌套的 DIV（或任何其他嵌套的 HTML 元素）（所以0,0 会将它放在页面的左上角），而不使用 javascript .

使用position:fixed 不起作用，因为它相对于视口定位它，所以如果页面滚动它不会移动。

使用position:absolute 将不起作用，因为我询问的是具有定位祖先的嵌套 DIV。这将导致位置将相对于定位的祖先。

【问题讨论】：

仅当外部元素左侧/顶部位置已知/固定时。
@LGSon 不仅如此，而且每个父母的顶部/左侧都需要根据您的想法进行修复......
@sam - 简而言之，不。发布一些代码或制作小提琴

标签： html css positioning

【解决方案1】：

不，没有脚本就无法做到……

...除非外部元素的左/上位置是已知/固定的，如本例中

.nr1,
.nr2 {
  position: absolute;
  width: 300px;
  height: 100px;
}

.nr1 {
  left: 50px;
  top: 50px;
  background: red;
}
.nr2 {
  left: 0;
  top: 0;
  background: blue;
  margin: -50px 0 0 -50px;
}

<div class="nr1">
  <div class="nr2">
  </div>
</div>

【讨论】：