position有哪些属性？

1. position: relative;相对定位
2. position: absolute;绝对定位
3. position: fixed;固定定位
4. position:static：默认值
5. position: sticky 粘性定位
6. position: inherit 规定应该从父元素继承 position 属性的值
7. position: initial 设置该属性为默认值

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位也是用来布局的，它有两部分组成：
定位 = 定位模式 + 边偏移
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
边偏移 就是定位的盒子移动到最终位置。有 top(上)、bottom（下）、left（左）、 right（右） 4 个属性。
边偏移的特点：
只能在定位模式上使用才会有效**
定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

定位模式介绍（position）

 ☞ 定位：     与元素的位置有关系
 ☞ 作用:
         通过网页布局（画盒子），使用定位摆放盒子位置。
☞ 语法：
     position: 具体的定位方式；
     left: 20px
   righ：20px
     top： 20px
      bottom: 20px

静态定位（static）【了解】

☞ 语法：
position: static;
☞ 特点：
1. 元素的默认显示方式就是静态定位【静态定位的元素就是标准流的默认显示方式】
2. 静态定位无法改变元素位置

相对定位(relative)

相对定位改变位置是以本身的位置偏移的，位置就算移动了原来的位置也是占着位置的
（可以理解为灵魂出窍，没有灵魂的身体还是占着位置的）
☞特点：
1. 可以改变元素位置
2. 相对定位的元素与父元素是否是定位的元素无关
3. 相对定位的元素是相对元素自己原来的位置
4. 相对定位的元素没有脱标

绝对定位(absolute)

绝对定位偏移位置是按照浏览器左上角为参照进行位置改变的，如果父盒子是相对定位，就会参照设置有相对定位的父盒子，进行位置改变的
相对定位使用场景：
✔ 一般情况下，只要子元素设置了绝对定位后，父元素就要设置相对定位【父相子绝】
1. 因为给父元素设置了相对定位后，绝对定位的子元素会以父元素为参照
2. 父元素是相对定位的时候，父元素没有脱标，父元素占位置
3. 子元素设置了绝对定位，父元素就设置相对定位
特点：
1. 可以通过绝对定位改变元素位置
2. 如果一个元素设置了绝对定位，默认会以body【浏览器】左上角为参照进行位置改变
3. 如果一个子元素是绝对定位，如果其父元素设置了除静态定位以外的其他定位，那么该绝对定位的子元素就会参照父元素左上角进行位置改变。
4. 绝对定位可以让元素脱标不占位置

定位居中

在定位中想要定位居中有 top(上)、bottom（下）、left（左）、 right（右） 4 个属性
设置为50%，然后减去居中盒子的一半的宽值，如果是垂直居中就是减去一半的高值

  ☞ margin: 0 auto； 只能让标准流下的盒子居中显示

  ☞ 如何实现绝对定位盒子居中：
        ✔ 先通过 left | right | top | bottom ： 50%  【相对父元素移动一半】
        ✔ 通过margin 设置负数 移动 当前元素宽度或高度一半
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;

固定定位(fixed)

设置固定定位后，会跟着滚动条上下移动，一直显示在浏览器固定的位置上
语法：
position: fixed;
left | right | top | bottom: 值;
☞ 特点：
1. 可以改变元素位置
2. 固定定位的元素始终都是以body（浏览器）左上角为参照设置位置。
3. 固定定位的元素也是脱标不占位置的元素
☞ 使用场景：
1. 网页中的广告

定位层级关系(z-index)

z-index: 数字; 数字不带单位
默认的是auto
数字越大，层级位置越高
负数 0 auto 正数（1~无穷）
注意：只有定位（相对绝对固定）的元素才能用z-index
☞ 注意：
✔只有定位的元素才有层级关系【标准流元素和浮动的元素都没有层级关系】
☞ 总结：
1. 如果一个元素设置了定位（除静态定位），那么该元素的层级就要比其他元素的层级高
2. 如果希望提高元素的层级，那么给定位的元素设置 z-index 属性，提高层级
3. 如果元素都设置了定位，那么最后的定位元素的层级比前面定位的元素的层级要高【后来居上】
4. 如果z-index值不同，那么值越大该元素的层级越高，反之层级越低【可以设置负数】
5. 如果一个元素的父元素也设置了定位，那么层级关系的高低，以父元素为准。

HTML5

定位（position）