CSS权威指南 - 浮动和定位

Posted 2020-06-17

定位

定位的想法很简单元素框相对于正常位置出现在哪里。

定位：static，相对， 绝对， fixed， 继承

static就是默认的位置

相对就是相对于默认位置的偏移。原来的static定位位置依然占着。

绝对定位相对于包含块（非static的）的偏移。完全脱离文档流，原来的位置就没了。

fix相对于viewport视窗的偏移。

包含块

根元素是初始包含块，有的浏览器是html元素，有的为body。

非根元素，position为相对或者默认位置，包含块是最近祖先级的块级框、表格单元、行内块。

非根，position为绝对，包含块为最近的非static的祖先元素。

如果是块级，包含块的边界是包含块的内边界。

如果是行内，包含块是行框的边界。

如果没有祖先，包含块是初始包含块。

包含块（containing box）其实就是定位上下文。理解成给position定位的参考环境。

偏移属性

有了参考环境，在二维上，上下左右的偏移多少呢？

这个属性的值，可以为长度、百分比、auto、inherit

值可以为负数，就是反方向的偏移。

长度好理解，百分比即为包含块的值的百分比。比如top/bottom 10% 就是包含块高的百分之10，如果left/right就是宽度的。

发现了一个问题，如果一个定位为relative的元素的包含块高度未设置，应该为auto的话。top/bottom设置为百分比的值。浏览器（firefox38）会忽略掉这个百分比的值。

参考：

Last Comment Bug 260348 - Relative positioning with percentages inside auto-height containing block does not work

https://bugzilla.mozilla.org/show_bug.cgi?id=260348