Question

您好，所以今天我碰到了一个非常有趣的问题。我不确定我做对了，也不确定后台实际发生了什么。我没有发现任何文章回答我的问题。所以这是：

假设我的页面非常简单，例如：

<html style="height:100%;">
  <body style="height:100%;">
    <div style="height:2000px;"></div>
    <test style="position:absolute; bottom:0;"></test>
  </body>
</html>

所以我没有将任何元素设置为相对元素。

我的期待：我的测试应该相对于身体元素定位。所以在我的页面的最后。

似乎发生了什么：我的div相对于视口（???）定位因此，而不是在页面的最后。从顶部开始是Xpx。所以，如果我在一个900px高度的浏览器上，那么元素从顶部定位900px，如果我滚动则保持在那里。

很抱歉，如果这一点清楚的话。我可以指定是否需要。有什么解释吗？

Answer 1

绝对定位的元素将根据流中最近的相对定位的祖先来定位。确保其中一个父包装器的位置设置为相对位置。

在这个小提琴中，元素位于底部： http://jsfiddle.net/L51u8qhz/

<div class="html" style="height:100%;">
  <div class="body" style="height:100%; position: relative;">
    <div style="height:2000px;"></div>
    <div style="position:absolute; bottom:0; background: #000; height: 10px; width: 100px;"></div>
  </div>
</div>

Answer 2

来自MDN

绝对定位的元素相对于其最近定位的祖先（即，最近的非静态祖先）定位。如果定位的祖先不存在，则使用初始容器。

现在，初始容器是视口大小的框。即使滚动也不会移动。

因此，如果绝对定位元素没有包含块，则位置将由视口限定的区域为w.r..

推荐的解决方案是将位置设置为除静态之外的父级（主要是它的主体）（大部分是相对的）

没有相关元素 - 会发生什么？

2 个答案: