定位、固定定位、层级、定位居中方法

定位

定位通过偏移属性来进行定位
偏移属性：
​
left：设置元素距离参照元素的左侧位移，正值往右，负值往左
right：设置元素距离参照元素的右侧位移，正值往左，负值往右
top：设置元素距离参照元素的顶部的位移，正值往下，负值往上
bottom：设置元素距离参照元素的底部位移，正值往上，负值往下
​
把元素进行定位移动，比如我想把这个元素放到右上角，那么我就可以通过定位来进行移动
​
谁要移动就把定位加在谁的身上
​
当元素有层级关系的时候用定位

1.相对定位

  相对定位
  语法：
  position：relative;
   特点：
   1.元素设置相对定位后，原来的位置还在
   2. 参照元素：自身原来的位置
   3.如果只设置  position：relative;,不设置偏移属性，则对元素本身没有影响
   4.提高层级
   使用场景：
   1.自身元素位置微调（稍稍调一下）
   2.作为绝对定位的参照元素

2.绝对定位

 绝对定位：
    语法：
    position：absolute;
    通过四个偏移属性来进行移动
     特点：
   1.元素设置绝对定位后，脱离标准流，也就是不占位，飘起来了
   2. 参照元素：父元素，父元素需要设置相对定位，如果父元素没有设置相对定位，则会往上级父元素找，都没有的话，则相对html(浏览器窗口)定位
   3.如果只设置  position：absolute;,不设置偏移属性，则对元素本身有影响
   4.提高层级（box1的盒子在box2盒子的身上）
   子绝父相：子元素设置绝对定位，父元素要设置相对定位
   使用场景：
     轮播图上的左右按钮，小圆点
     商品列表上的元素
     有层级的场景

一定要记住：子元素设置绝对定位，父元素要设置相对定位

固定定位

    固定定位:
    语法：
    position：fixed;
​
    特点：
    1.不会随页面的内容滚动而滚动
    2.当只设置position: fixed;，没有设置偏移属性，此时对元素本身是有影响的
    3.参照元素:浏览器的四个窗口
    4.提升层级（在别的元素身上）(box2在box3的身上)
    5.脱离正常标准流，不占位，也就是飘起来了
​
​
    应用场景:
    固定的导航栏
    固定侧边栏

层级

相对定位、绝对定位、固定定位都可以提示元素的层级
​
    1.在层级一样的情况下，结构在后的层级高于结构在前的层级
    2.层级必须与定位position一块使用，否则不生效
    3.可以设置层级 z-index：n;
      层级默认值为0
      n可以为正数
            负数
              0
              不能为小数
​
    4.数值越大，层级越高
​
​
​
      /* 层级不能为小数 */
      z-index: 9.9;

定位居中方法

让元素实现水平居中垂直居中
类似于页面中的弹窗
​
1.需要设置宽高
2.设置绝对定位    position: absolute;
3.四个偏移属性值为0
4.设置margin:auto;
​
​
​
.wrap {
width: 400px;
height: 400px;
background-color: pink;
​
​
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/* auto  浏览器自动计算 */
​
}
​