定位 = 定位模式 (position)+位偏移(top、right、bottom、left)
1.静态static(默认)如下:div初始位置
2.相对定位(position:relative)
(1)子盒子相对于自身原来的位置进行移动
(2)不脱离标准流,后面的盒子不会占据它的位置
如下:紫色盒子相对于自身原来的位置进行偏移
position: relative;
top: 100px;/*相对于自身原来的顶部进行偏移*/
left: 80px;/*相对于自身原来的左部进行偏移*/
3.绝对定位(position:absolute)
(1)当子级盒子没有父级盒子或有未定位的父级盒子,子级盒子相对于浏览器可视化窗口进行移动
(2)绝对定位脱离标准流,后面的盒子会占据它的位置
(3)子级盒子绝对定位,可以在父级盒子内任意移动
重点:子绝父相
子级盒子绝对定位,父级盒子相对定位
原因:
- 子级盒子可以在父级盒子内任意移动,脱离标准流
- 父级盒子如果是绝对定位,脱离标准流,原位置被后面的盒子占据
- 父盒子需要加定位限制子盒子在父盒子内显示
如下:紫色子盒子和灰色父盒子未定位前
只对紫色子盒子进行绝对定位,可见紫色盒子是以浏览器为参照进行偏移,
position: absolute;
top: 210px;
right: 100px;
如下图:
此时对灰色盒子进行position:absolute定位,灰色父盒子已脱离标准流,蓝色盒子则占据灰色盒子的位置
/*灰色盒子*/
position: absolute;
left: 100px;
/*紫色盒子*/
position: absolute;
top: 210px;
right: 100px;
子绝父相
/*灰色盒子*/
position: relative;
left: 100px;
/*紫色盒子*/
position: absolute;
top: 210px;
right: 100px;
4.固定定位(position:fixed)
- 以浏览器可视化窗口为参照点进行偏移
- 跟父元素没有任何关系
- 不跟随页面的滚动
- 不占有位置,脱离标准流,是特殊的绝对定位
/*右侧fixed盒子进行固定定位*/
position: fixed;
top: 100px;
right: 80px;