定位布局position

1.定位布局

position:定位布局
偏移量：top/right/bottom/left

2.静态定位

position:static; 默认文档流
搭配（margin-xx）
不能搭配定位的方位名词

3.相对定位

position：relative;开启相对定位（移动自身）
特点：
（1）开启定位后，如果不设置偏移量元素不会发生任何变化
（2）参照自身原来的位置进行移动
（3）相对定位会提升元素的层级
（4）不脱离文档流
（5）不会改变元素的性质（块还是块，行内还是行内）

4.绝对定位

position:absolute;开启绝对定位
特点：
（1）开启定位后，如果不设置偏移量元素的位置不会变化
（2）元素会脱离文档流
（3）元素性质改变（行内变成块，块的宽高被内容撑开）
（4）使元素提升一个层级
（5）相对于包含块进行移动

包含块：①正常情况下包含块就是离当前元素最近的祖先块元素
②绝对定位包含块是离它最近的开启了定位的祖先元素
③所有元素未开启定位，则包含块是根元素html

5.固定定位

position:fixed;开启固定定位
特点：
永远参照于浏览器的可视窗口进行定位（不会随网页的滚动条滚动）
z-index值人为设置最高
特殊的绝对定位
应用：广告，客服，返回顶部，导航栏等

6.粘性布局

position:sticky;开启定位
特点：
特点同绝对定位，不同的为粘滞定位可以在元素到达某个位置时将其固定。
临界值：top/left
position:-webkit-sticky;
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

7.元素居中

只适用于开启绝对定位的大小确定的元素