CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素

position为absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位，如果上级元素都没有position属性，那么则相对于初始包含块定位。

初始包含块不是body元素也不是html元素，而是html元素的包含块（the initial containing block），指的是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。

想详细了解可以前往w3c关于包含块及初始包含块的定义。

下面是测试代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>例子</title><style type="text/css">html{background-color: yellow;border: 5px solid black;}body{width: 600px;height: 600px;background-color: grey;border: 5px solid red;color: white;font-size: 50px;}#box1{width: 200px;height: 200px;background-color: green;border: 5px solid blue;}</style></head><body>BODY<div id="box1">div</div></body>
</html>

我们给html元素，body元素和div元素都加了一个边框和背景颜色，此时的效果如下：

被黑色边框包围的区域是html元素的区域，被红色边框包围的是body元素。
这里我们给div元素添加position:relative;和bottom: 0px;。
效果如下：

可以看出div元素不是根据body元素或html元素来定位的。

CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素相关推荐

CSS绝对定位(absolute)同时设定left right,或者top bottom
渲染的时候会尽量满足,相当于设置了width=100%,height=100%,可以利用margin:auto实现水平/垂直居中 <!DOCTYPE html> <html> ...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块
目录何为定位偏移量垂直方向 top bottom 水平方向 left right relative-相对定位何为相对定位相对定位的特点实例元素代码的起始位置元素若不开启相对定位,即便设 ...
微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
你真的了解CSS包含块么？
我所了解的CSS包含块包含块有什么作用呢?下文接下来带你知晓 ↓↓↓↓↓↓↓ 文章目录我所了解的CSS包含块指出错误观念什么是包含块? 根元素包含块其他元素的包含块如何确定元素的包含块? ...
html怎么做包含块,字节前端都知道的CSS包含块规则
你是否曾对CSS中的百分比单位非常疑惑?是否简单认为百分比的基准值就是所在元素的宽高?本文将从包含块角度帮助大家理解记忆百分比单位的计算规则,便于巧妙运用包含块规则解决实际开发中的布局问题! 一.确立 ...
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
CSS绝对定位模拟固定定位(absolute模拟fixed)
滚动条的产生滚动条在谁身上初始包含块 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
下面html标签元素中不属于块元素的是,HTML中为何P标签内不可包含块元素？
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素

CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素相关推荐

最新文章

热门文章