对象是否具有位置:绝对引用、html元素高度或视图？
我创建了代码页，它演示了在元素定位方面的混淆行为。
第一科显示一个块元素，其位置为:绝对值和底部:10 The。
<div class="block_element square absolute">
Example
</div>
<div class="content">
<!-- a bunch of lorem ipsum -->
</div>这个绝对定位显示了正确的行为，并将10 of定位在屏幕底部。
第二科有javascript，它获取html元素的高度，并将其显示在一个div中，该div的高度为5000 it。
var o = document.getElementsByTagName("html")[0];
var styles = window.getComputedStyle(o);
var p = styles.getPropertyValue('height');
document.getElementById('answer').innerHTML = p;html元素的高度显示为大于屏幕高度的高度，这与通常认为html高度和宽度等于屏幕大小的看法背道而驰。比如看到了这里
“html元素的高度和宽度由浏览器窗口控制”(来自上面的链接)
为什么html元素的高度不等于屏幕高度？如果是这样的话，什么是立场:绝对引用？
回答 3
Stack Overflow用户
发布于 2016-04-18 22:05:16
绝对定位元素相对于其包含的块被抵消。
在绝对定位模型中，箱体相对于其包含的块显式偏移。
对他们来说，含块是
如果元素具有“位置:绝对”，则包含的块由最近的祖先以
positionofabsolute、relative或fixed的方式建立，方式如下：
- 在祖先是内联元素的情况下，包含的块是为该元素生成的填充框周围的包围框。在CSS2.1中，如果内联元素被分割成多行，则包含的块未定义。
- 否则，包含的块由祖先的填充边形成。
如果没有这样的祖先，则包含块是初始包含块。
在您的示例中，没有定位的祖先，因此包含的块是最初的那个。
根元素所在的包含块是一个称为初始包含块的矩形。对于连续介质，它具有视口的维度，并锚定在画布原点；它是分页媒体的页面面积。
不，默认情况下根元素的高度是由其内容决定的，而不是视图的高度。但是你可以用
html { height: 100%; }Stack Overflow用户
发布于 2016-04-18 21:49:12
在第二支笔中，高度5028px表示5000px + 10px (填充)+ 2px (边框)+ body的默认padding之和。
尝试添加以下行：
body { margin: 0; }并注释padding和border并删除body的默认页边距，将显示5000px与你这支笔的叉一样。
Stack Overflow用户
发布于 2016-04-18 21:50:20
5000 8px (.box )+ 8px (body上缘)+8px (body底部边距)+ 5px (.box顶部填充)+ 5px (.box底部填充)+ 1px (.box顶部边框)+ 1px (.box底部边框)=5028 8px。
https://stackoverflow.com/questions/36704666
复制相似问题
腾讯云开发者
