CSS - 定位，相对定位，绝对定位，子绝父相，固定定位，如果重叠设置盒子的显示顺序

1.相对定位

移动的时候是依照自己原来的位置，原来标准流的位置继续占有，后面的盒子仍然以标准流的方式待他

/*设置定位模式*/
position: relative;

/*上 偏移*/
top: 10px;

/*下 偏移*/
bottom: 10px;

/*左 偏移*/
left: 10px;

/*右 偏移*/
right: 10px;

 

2.绝对定位

移动的时候是依照自己的父元素来移动位置的，如果没有父元素就会依照游览器文档来移动位置

需要子元素约束在父元素内，父元素就需要加定位，不然子元素会依照游览器文档为移动位置

如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置

绝对定位不在占有原先的位置

/*设置定位模式*/
position: absolute;

/*上 偏移*/
top: 10px;

/*下 偏移*/
bottom: 10px;

/*左 偏移*/
left: 10px;

/*右 偏移*/
right: 10px;

 

3.子绝父相

子元素加绝对定位，父元素加相对定位(绝对定位不占据原来的位置，相对定位占据原来的位置)

 

4.固定定位

固定于游览器显示的区域，不会随着页面的滚动而移动，固定定位是固定的

不占有原来的位置

/*设置定位模式*/
position: fixed;

/*上 偏移*/
top: 10px;

/*下 偏移*/
bottom: 10px;

/*左 偏移*/
left: 10px;

/*右 偏移*/
right: 10px;

 

4.设置盒子的显示顺序

z-index: 1;

属性值 auto 默认值，可以是正整数，负整数 数值越大 盒子越靠上