关于position:absolute,祖先元素均为设置定位,子元素如何定位

在菜鸟教程的CSS教程中有这样一句话

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>

我也一直以这句话作为绝对定位的标准,直到今天,在偶然发现,祖先元素均未定位的绝对定位元素,无论是定位还是宽高相对于的不是,而是浏览器的窗口即viewport。
demo:

<!DOCTYPE html> <head> <title>Document</title> </head> <style> html { min-width: 1200px; } .box { position: absolute; right: 0; top: 0; width: 50%; height: 100px; background-color: yellow; } </style> <body> <div></div> </body> </html>

在给设置了宽度之后,box的宽度和定位始终相对于浏览器窗口大小,并非html。

关于position:absolute,祖先元素均为设置定位,子元素如何定位

后来查阅MDN文档,发现菜鸟教程的定义并不准确,在MDN中是这样写的:

绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。

初始包含块:

根元素的包含块是一个矩形,叫做初始化包含块;

对于 【连续媒体】就是,初始化包含块的 尺寸等于viewport的尺寸,起点是canvas的原点;

初始化包含块的方向(direction)等同于根元素的方向;

初始化包含块不是viewport,只是尺寸一样;

总结:若绝对定位元素不存在非 static 定位的祖先元素,则元素相对于初始包含块定位并非<html>,而初始包含块的尺寸与方向与viewport相同。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgwjgj.html