CSS的布局——相对定位、绝对定位、固定定位、静态定位、层叠关系

一、定位的概念

定位 ：通过定位将盒子定在页面中的某一位置

二、定位模式

语法: 选择器{ position:值 }

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

三、偏移量(offset)

偏移量:当元素开启定位后，可以通过偏移量改变元素的位置

边偏移属性	描述
top	定位元素和定位位置上边的距离, 通俗点来说：top值越大，元素越向下边移动
left	定位元素和定位位置左测的距离, 通俗点来说：left值越大，元素越向右测移动
right	定位元素和定位位置右测的距离, 通俗点来说：right值越大，元素越向左测移动
bottom	定位元素和定位位置下边的距离，通俗点来说：left值越大，元素越向上测移动

用法示例：top:100px;

四、定位的组成

定位=定位模式+偏移量
定位模式用于指定一个元素在文档中的定位方式，偏移量则是指定元素的最终位置

五、定位的特点

1.相对定位

• 元素相对于其原先位置移动
• 元素开启相对定位后，如果不设置偏移量则不会发生变化
• 相对定位不会使元素脱离文档流
• 相对定位会提升元素的层级

2.绝对定位

• 开启绝对定位后，不设置偏移量则不会发生变化
• 开启绝对定位后，元素会从文档流脱离
• 改变元素的性质，行内元素会变成块状元素，块状元素的宽高被内容撑开
• .绝对定位会使元素提升一个层级
• 绝对定位是相对于最接近的一个具有定位属性的祖先元素进行定位，如果最接近的祖先元素没有定位，则依据根元素进行定位
• 开启绝对定位后 margin 0 auto无效

3.固定定位

• 跟绝对定位特点大多一样
• 唯一不同点：固定定位永远参照于浏览器的视口进行定位，就是说当页面滚动时，元素的位置不会改变

六、子绝父相

• 子级是绝对定位的话，父级要用相对定位
• 子级绝对定位，不会占有位置，可以放到盒子的任何一个地方，不会影响其他兄弟盒子。
• 父盒子需要加定位让子盒子再父盒子内显示

七、层叠关系

语法规范:选择器 { z-index : number;}

• 数值可以是正整数、负整数或0，默认是auto，数值越大，层叠级别越高，盒子越靠上,如果是负数，则将隐藏再文档流下面
• 如果相同属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 注意：只有定位的盒子才有 z-index 属性