深入 position

static

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

relative

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

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

点击查看偏移前后对比

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

absolute

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

灰色盒子为相对定位

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

红色盒子 absolute 定位

点击切换有无设置 absolute

absolute 设置宽度

灰色盒子为相对定位

红色盒子 absolute 定位

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

fixed

请看右下角

灰色盒子父元素,position 为 relative

点击切换有无设置 transform

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

点击切换有无设置 fixed

sticky 1,滚动到此,我就贴在顶部

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

sticky 2,滚动到此,我就贴在顶部

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

sticky 3,滚动到此,我就贴在顶部

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本

我是文本