关于前端:本节介绍的是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 雷同方向本身的宽的负值的一半就能够居中
代码片段