Question

考虑一下：

<div class="normal">
  <div class="abs1">
    ...
    <div class="abs2">
    </div>
  </div>
</div>

使用此CSS

.abs1 {
  position: absolute;
}
.abs2 {
  position: absolute;
}

因此，.abs2 div的位置相对于其.abs1祖先。如果我需要它相对于文档，或者更高层次的层次结构中的另一个祖先，该怎么办？那可能吗？怎么样？

Answer 1

这里的答案非常好：

因为position：absolute会重置孩子的相对位置   就像位置：亲戚一样。

没有办法解决这个问题 - 如果你想要第三个div   绝对定位相对于第一个，你将不得不   让它成为第一个孩子。

来源：https://stackoverflow.com/a/5928069/5814976

Answer 2

您可以解决此限制。 如果您知道绝对定位的父级计算的位置值，您可以使用与calc()结合的那些来确定孩子相对于将要模拟的父级所需的定位值它相对于页面定位。 此解决方案有很多警告，所以它可能对您没有帮助。

场景1

我们希望使用left定位孩子，就像它相对于页面定位一样。父级也使用left。

定位

我们可以从所需的页面相对left值中减去其left值，以获得该子项的正确left值。

＆＃13;

var abs2 = document.querySelector('.abs2');

abs2.addEventListener('click',  displayPositionValues);

function displayPositionValues() {
  var top = abs2.getBoundingClientRect().top;
  var left = abs2.getBoundingClientRect().left;
  
  alert('I\'m ' + top + 'px from the top and ' + left + 'px from the left of the page')
}

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

.normal {
  width: 100%;
  height: 200px;
  background-color: orange;
}

.abs1 {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 150px;
  height: 150px;
  background-color: green;
}

/* we want this to be positioned 100px from the top and 180px from the left of the page */
.abs2 {
  position: absolute;
  top: calc(100px - 40px); /* top value = page relative top value - parent's top value */
  left: calc(180px - 20px); /* left value =  page relative left value - parent's left value */
  width: 100px;
  height: 100px;
  font-size: 12px;
  text-align: center;
  background-color: red;
  cursor: pointer;
}

＆＃13;

<div class="normal">
  <div class="abs1">
    <div class="abs2">
      Click to display my position values
    </div>
  </div>
</div>

＆＃13;

场景2

我们希望使用left定位孩子，就像它相对于页面定位一样。父级使用right定位。

如果页面的宽度等于视口的宽度 AND ，我们知道父的宽度，那么我们就可以确定孩子的{{1}使用以下公式对应于等效right值的值：

正确的值=视口宽度 - 所需的左值 - 儿童的宽度 - 父母的正确价值

＆＃13;

left

＆＃13;

var abs2 = document.querySelector('.abs2');

abs2.addEventListener('click',  displayPositionValues);

function displayPositionValues() {
  var top = abs2.getBoundingClientRect().top;
  var left = abs2.getBoundingClientRect().left;
  
  alert('I\'m ' + top + 'px from the top and ' + left + 'px from the left of the page')
}

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

.normal {
  width: 100%;
  height: 200px;
  background-color: orange;
}

.abs1 {
  position: absolute;
  top: 40px;
  right: 20px;
  width: 150px;
  height: 150px;
  background-color: green;
}

/* we want this to be positioned 100px from the top and 180px from the left of the page */
.abs2 {
  position: absolute;
  top: calc(100px - 40px); /* top value = page relative top value - parent's top value */
  right: calc(100vw - 180px - 100px - 20px); /* right value = viewport width - desired left value - child's width - parent's right value */
  width: 100px;
  height: 100px;
  font-size: 12px;
  text-align: center;
  background-color: red;
  cursor: pointer;
}

＆＃13;

Answer 3

如果您不希望该职位相对于父母，那么为什么该元素首先是该父母的子女？从层次上讲，这没有任何意义。

只需将第二个div放在第一个div之后，给它们两个绝对位置。

尽管祖先具有绝对位置，但如何在页面中使元素的位置绝对

3 个答案:

场景1

场景2