口诀 :子绝父相
相对定位relative,
1.相对于原来的位置
2.原来的位置继续占有
绝对定位absolute,
1.完全不占位置
2.相对于父元素,
固定定位fixed,
1.以浏览器的可视窗口为参照点移动元素。
2.固定定位不再占有原先的位置。
静态定位static。
很少用到
粘性定位(sticky)
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差,IE 不支持。
- 注意:
- 边偏移需要和定位模式联合使用,单独使用无效;
top和bottom不要同时使用;left和right不要同时使用。