Question

我创建了codepens，它展示了元素定位方面令人困惑的行为

First Codepen显示一个块元素，其位置为：absolute和bottom：10px

 <div class="block_element square absolute">
 Example
 </div>
 <div class="content">
 <!-- a bunch of lorem ipsum -->
 </div>

此绝对定位显示正确的行为，并从屏幕底部向上10px位置

Second Codepen有javascript，它抓取html元素的高度并将其显示在高度为5000px的div中

var o = document.getElementsByTagName("html")[0];
var styles = window.getComputedStyle(o);
var p = styles.getPropertyValue('height');
document.getElementById('answer').innerHTML = p;

html元素的高度显示为高于屏幕高度的高度，这违背了html高度和宽度等于屏幕大小的常见信念。如见过Here

“html元素的高度和宽度由浏览器窗口控制” （来自上面的链接）

为什么html元素高度不等于屏幕高度？如果是这样，那么什么是位置：绝对引用？

Answer 1

Absolutely positioned元素相对于其包含块进行了偏移。

在绝对定位模型中，框相对于其包含块显式偏移。

对于他们来说，containing block是

如果元素具有'position：absolute'，则包含块为   由最近的祖先建立position absolute，   relative或fixed，方式如下：


在祖先是内联元素的情况下，包含块是第一个和第二个填充框周围的边界框。   为该元素生成的最后一个内联框。在CSS 2.1中，如果是   内联元素分为多行，包含块为   未定义。

否则，包含块由祖先的padding edge形成。

如果没有这样的祖先，则包含块是初始值   包含块。

在你的情况下，没有定位的祖先，所以包含的块是the initial one：

root element所在的包含块是一个矩形称为初始包含块。对于连续媒体，它有 viewport的尺寸并锚定在画布原点;它是分页媒体的page area。

不，默认情况下，根元素的高度由其内容给出，它不是视口的高度。但你可以用

实现这一目标

html { height: 100%; }

Answer 2

在第二支笔中，高度TIMESTAMP表示5028px + 5000px（填充）+ 10px（边框）+ 默认值<的总和2px的{{1}}。

尝试添加以下行：

padding

并对body和body { margin: 0; }发表评论并删除padding的默认边距，并在this fork of your pen中显示border。

Answer 3

5000px（display: inline-block;高度）+ 8px（.box上边距）+ 8px（body下边距）+ 5px（body顶部填充）+ 5px（{{ 1}}底部填充）+ 1px（.box顶部边框）+ 1px（.box底部边框）= 5028px。

具有位置的对象：绝对引用html元素高度或视口？

3 个答案: