在菜鸟教程的CSS教程中有这样一句话
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
我也一直以这句话作为绝对定位的标准,直到今天,在偶然发现,祖先元素均未定位的绝对定位元素,无论是定位还是宽高相对于的不是,而是浏览器的窗口即viewport。
demo:
在给设置了宽度之后,box的宽度和定位始终相对于浏览器窗口大小,并非html。
后来查阅MDN文档,发现菜鸟教程的定义并不准确,在MDN中是这样写的:
绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。
初始包含块:
根元素的包含块是一个矩形,叫做初始化包含块;
对于 【连续媒体】就是,初始化包含块的 尺寸等于viewport的尺寸,起点是canvas的原点;
初始化包含块的方向(direction)等同于根元素的方向;
初始化包含块不是viewport,只是尺寸一样;
总结:若绝对定位元素不存在非 static 定位的祖先元素,则元素相对于初始包含块定位并非<html>,而初始包含块的尺寸与方向与viewport相同。