为啥位置:绝对;和底部:0;不在身体的底部? [复制]

Posted

技术标签:

【中文标题】为啥位置:绝对;和底部:0;不在身体的底部? [复制]【英文标题】:Why position: absolute; and bottom: 0; not being at body's bottom? [duplicate]为什么位置:绝对;和底部:0;不在身体的底部? [复制] 【发布时间】:2019-05-20 05:18:38 【问题描述】:

更新:我知道添加一个位置:相对; to body 会使元素位于 body 的底部,我只是没有找到关于何时找不到非静态父级的描述,该位置与什么相关。所以我认为这个问题不会重复到this one。感谢@Ben Kolya Mansley

====

我正在编写一个组件,但遇到了一个问题。我设置了一个绝对元素位置和底部 0,并将其附加到 document.body (主体高度大于屏幕高度),但它不在主体底部,而是在视口底部。为什么这么连线?

我读了position和bottom的mdn。它说具有绝对位置的元素将寻找非静态定位的父级,如果找不到,它将相对于主体。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <style>
      html, body 
        margin: 0;
        padding: 0;
      
      body 
        height: 1500px;
      
      .bar 
        position: absolute;
        bottom: 0;
      
    </style>
    <div class="bar">this is bar</div>
  </body>
</html>

【问题讨论】:

你真的应该把你的&lt;style&gt;标签放在&lt;head&gt;元素里面——而不是你的&lt;body&gt; 因为body需要position:relative,默认是position:staticbody 不算作父母。 【参考方案1】:

来自 MDN 的 documentation 绝对定位:

绝对定位的元素是相对于它最近的定位祖先(即最近的非静态祖先)定位的。如果定位的祖先不存在,则相对于 ICB(初始包含块)定位,该 ICB 是文档根元素的包含块。

这说明它定位到的不是body,而是初始包含块,它具有视口的尺寸,而不是主体。

通过将position: relative; 添加到body,元素将与底部对齐。

有关初始包含块的更多信息,请访问W3 specification

【讨论】:

以上是关于为啥位置:绝对;和底部:0;不在身体的底部? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

CSS位置:绝对,底部:0,父级溢出:自动

为啥我的页脚不在页面底部?

html+css网页头部为啥会覆盖身体不分,怎么改过来

jQuery UI 可拖动,具有绝对位置和底部属性

位置绝对和保证金底部

在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]