1.relative 相对定位 ,相对自身原来位置,原有空间保留,不会被挤占。宽度为父元素宽度,且宽度会撑大/缩小父元素宽度
2.fixed 固定定位,
实现某个元素在可视窗口的居中位置显示
1)给自身设置宽高;
2)给自身加position:fixed;
3)用margin向左移动自身宽度的一半,向上移动自身高度的一半;
3.absolute 绝对定位 脱离文档流 寻找父级是否有相对定位
如果有 根据父级定位 如果没有找到会忘记父级的父级寻找
直到浏览器才会根据浏览器定位。
4.sticky 粘性定位
#sticky-nav { position: sticky; top: 100px; }
设置 position:sticky
同时给一个 (top,bottom,right,left)
之一即可
使用条件:
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效