定位

定义

用于控制元素在DOM中的位置的工具类。

工具类	属性
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

使用方法

static 与 absolute

使用 static 根据常规的文档流来定位元素，浏览器默认 position 取值就是 static。任何偏移都将被忽略，而且该元素不会作为绝对定位的子元素的位置参考。

Static 父元素

Absolute 子元素

relative 与 absolute

使用 relative 根据常规的文档流来定位元素。偏移量是相对于元素的正常位置计算的，并且该元素将作为绝对定位的子元素的位置参考。

使用 absolute 将一个元素定位在文档常规流之外，使相邻元素的行为就像该元素不存在一样。偏移量是相对于最近的位置不是 static 的父元素计算的，而且该元素将作为其他绝对定位的子元素的位置参考。

Relative 父元素

Absolute 子元素

sticky

sticky 元素根据正常文档流进行定位，然后相对它的最近滚动祖先和 containing block，包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

黄鹤楼送孟浩然之广陵

故人西辞黄鹤楼，

烟花三月下扬州。

孤帆远影碧空尽，

唯见长江天际流。

闻王昌龄左迁龙标遥有此寄

杨花落尽子规啼，

闻道龙标过五溪。

我寄愁心与明月，

随君直到夜郎西。

宣州谢朓楼饯别校书叔云

弃我去者，昨日之日不可留；

乱我心者，今日之日多烦忧。

长风万里送秋雁，对此可以酣高楼。

蓬莱文章建安骨，中间小谢又清发。

俱怀逸兴壮思飞，欲上青天揽明月。

抽刀断水水更流，举杯消愁愁更愁。

人生在世不称意，明朝散发弄扁舟。

fixed

使用 fixed 来定位一个元素相对于浏览器窗视口的位置。偏移量是相对于视口计算的，且该元素将作为绝对定位的子元素的位置参考。