本节介绍的是css的定位属性的应用
- 什么是定位
- 绝对定位
- 相对定位
固定定位
什么是定位
定位的概念：定位是一种次要的布局属性，罕用于压盖或者地位相干的成果
属性名：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雷同方向本身的宽的负值的一半就能够居中
代码片段