本文共 2832 字，大约阅读时间需要 9 分钟。
绝对定位元素相对于最近的有定位的（position值为非static）父级元素定位，如果不存在满足条件的父元素，则相对于哪个元素定位 ？
若无非static祖先，是相对于初始包含块来定位的，而初始包含块并不是以html 或body 进行定位。
定位体系和包含块
- 根元素 HTML的包含块 叫做初始包含块（initial containing block）。初始包含块的“ direction”属性与根元素相同。
- 大多数情况下，包含块就是这个元素最近的祖先块元素的内容区。
如何确定具有不同position属性的元素元素的包含块？
确定包含块的过程完全依赖于这个包含块的 position 属性，大致分为下列场景：
- 如果 position 属性是 static 或 relative 的话，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文BFC(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
- 如果 position 属性是 absolute 的话，包含块就是由它的最近的 position 的值不是 static （fixed, absolute, relative, or sticky）的祖先元素的内边距区的边缘组成的。
- 如果 position 属性是 fixed 的话，包含块就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 组成的。
- 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的： A transform or perspective value other than none A will-change value of transform or perspective A filter value other than none or a will-change value of filter (only works on Firefox).
案例：div绝对定位 bottom:0 ，body,html无定位的效果图如下：
<html> 或 <body> 有滚动条时
当有滚动条时效果是这样的：
尝试减少html宽度位80%：
滚动滚动条的效果： 
由此得出：div仍然是相对于初始包含块定位的，只是我们对初始包含块的定义不够了解，初始化包含块不是viewport,只是尺寸一样。
划重点： 滚动系统滚动条会影响初始包含块的位置。也就是说，初始包含块会随着滚动条移动（PS.这里的移动是指初始包含块随滚动条向上移动）
对于连续媒体，初始包含块具有视口的尺寸，并固定在画布原点；而对于分页媒体，则是一个页面的区域。我们使用的电脑屏幕属于连续媒体。
html，body 的探究
background-color
从上面的案例中引申出另一个问题：
为什么在 html 中 给 body 元素设置 css background 后全屏都有效果？
CSS 规范规定在没有单独设置 html 元素上的 background 时，直接应用 body 上的 background 属性的计算值。
html未设置，body设置时；不是body的background起作用，而是body作为一个根节点起作用了，<html>标签未被激活，body担当类似于根节点的节点，其background背景色被浏览器捕获。当<html>标签无背景样式时，<body>的背景色其实不是<body>标签的背景色，而是浏览器的。
<html>节点的background背景色之后，<body>的背景色变成了正常的<body>标签（一个实实在在，普普通通标签）的背景色，而此时的<html>标签最顶级，背景色被浏览器获取，成为浏览器的背景色。 一般来讲，如果在标签中设置background-color属性，这种颜色就会充满整个浏览器窗口；但是如果在标签中也设置了背景色，那么body的背景色就只会填满内容区域。 ——《css实战手册》
注意：即使在html源代码中省略了body标签，body元素的规则仍将起作用，因为html解析器将推断出丢失的标签。
高度百分比
- 如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；
- 如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一。
body 和 HTML的 高度百分比显示
百度面试题：透明层无论滚动与否都满屏显示
<html>和<body>标签高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个<div>高度100%显示，溢出滚动。而这个透明层就使用绝对定位且与这个<div>平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。
默认状态下，<body>不是高度100%显示的。
解决ie6下固定定位失效的问题：用绝对定位来模拟固定定位
1.禁止系统滚动条(系统的滚动条是在文档上，而不是在html,body上)
2.将滚动条作用在最外层的包裹器上或者在body上
3.因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置， 所以一个按照初始包含块定位的元素就不会产生移动
body的溢出隐藏
只设置body的overflow：hidden是无法隐藏高度不足一屏的元素的(body给定一个<屏幕的宽度)。如果想要隐藏需要设置HTML的overflow：hidden。并不是说body overflow无效，而是body天然的overflow计算容器是一屏高度。
文中若发现有误之处，请及时指出~
参考：
转载地址：https://blog.csdn.net/Conradine_Lian/article/details/109388364 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
