本节介绍的是css的定位属性的使用

本节介绍的是css的定位属性的使用

1. 什么是定位
2. 相对定位
3. 绝对定位

4. 固定定位

   什么是定位

   定位的概念：定位是一种主要的布局属性，常用于压盖或者位置相关的效果
   属性名：position
   属性值：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）
   作用：设置定位元素，根据某个参考元素进行位置偏移
   偏移量属性：定位的元素需要移动的方向位置
   属性名：left、right、top、bottom
   属性值：px值、%

   相对定位

   属性值：relative
   参考元素：标签加载的原始位置，必须搭配偏移量属性才可以偏移
   特点：相对定位不脱离标准流，保留原始位置，不会让出原理位置

        div{
            border: 1px solid red;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            position: relative;
            left: 100px;
        }

相对定位应用
1、由于相对定位元素会保留原有位置，可以将相对定位作为后期绝对定位的参考元素，父相子绝
2、相对定位较为稳定，在占有原有位置情况可以对加载效果进行位置微调或者文字微调
3、自定义压盖顺序效果，给定位元素添加z-index属性才可以生效，父z-index大则大，父无设置，则子级比较z-index大小，如果都一样则根据html顺序覆盖
代码片段

绝对定位

属性值：absolute
参考元素：距离最近的有定位的祖先元素，如果祖先元素没有定位则参考body
需要搭配偏移量属性
特点：绝对定位脱离标准流，让出标准流位置，可以设置宽高，随时定义位置，绝对定位不设置宽高内容会撑开

固定定位

属性值：fixed
参考元素：浏览器窗口
固定定位的元素会始终显示在定位位置
特点：固定定位脱离标准流，让出标准流位置，可以设置宽高，根据偏移量固定在浏览器窗口的位置。

利用定位进行居中
定位元素想要在参考元素中居中，需要将x轴的一个方向设置50%，然后再加margin相同方向自身的宽的负值的一半就可以居中
代码片段