深入 position

static

没有设置 position，所以默认为 static。设置偏移位置无效

我是用来测试文本 1，对我没有影响

设置为 relative，left 为 20px，top 为 20px。relative 设置偏移位置后，不影响其他兄弟元素的排布。

点击查看偏移前后对比

我是用来测试文本 2，对我没有影响

当红色盒子设置为绝对定位时，会从父元素绿色盒子中脱离出来，成为一个独立的存在。其定位偏移以最近设置了 position 为非 static 为基准，这里就是灰色盒子。

灰色盒子为相对定位

绿色盒子为 absolute 定位元素的直接父元素，然而没有设置 position

红色盒子 absolute 定位

点击切换有无设置 absolute

absolute 设置宽度

灰色盒子为相对定位

红色盒子 absolute 定位

设置宽度，left 和 right 同时设置则取 left；高度 auto，top 和 bottom 同时设置形成的区域就是该高度

请看右下角

灰色盒子父元素，position 为 relative

点击切换有无设置 transform

fixed 定位，以视窗进行偏移定位

点击切换有无设置 fixed

我是文本

我是文本

我是文本