CSS定位

一、 浮动和定位的区别：

浮动：为半脱离文档流，虽然浮动但不脱离父框，仍占据位置，受其它元素影响，并且多个浮动元素会按顺序排列。脱离文档流是完全脱离父框，变性为行内块元素。
定位：除相对定位外，其它定位均完全脱离标准文档流
浮动回顾：

二、 固定定位：Position：fixed

释义：相对浏览器或position值非static的定位（static: 默认值“0”即取消定位）
用法步骤及案例：

三、 相对定位：positiong: Relative

释义：相对与自己原来的位置定位，进行位置的调整，不脱标。只配置z-index：不配置偏移方向和偏移量，只提供一个纯粹的参照物功能。
margin与相对定位调整位置的区别：
1.盒子和盒子的距离，间隙。相对定位：位置的调整
2.margin会影响后面的元素。相对定位不会影响别人。

四、 绝对定位：positiong: absolute

1）特点：1.需由参考系 。2.会脱离标准文档流
2）用法步骤：

3） 补充：参考系及平移变换

1. 参考系：中心点坐标系以中心为正，原点坐标系以向右向下为正。
   另：center、left、right、top、bottom后面跟数值时以屏幕中心为正，当以长度时向右和向下为正。
2. 平移变换：
   transform（变换）：translate X 沿X轴平移向右为正
   transform（变换）：translate Y 沿Y轴平移向下为正（偏移是以屏幕中心位置为正）
   应用案例：

五、 粘性定位 ：positiong:sticky

应用案例：（多用于手机APP）

六、 特别说明：

1） 定位不能以同级为参照物，需要以上级（父级或祖级）为参照物
2）Z-index：定位元素专用，属性值为自然数，默认为0，数值大的会压盖住数值小的。
特点：
1．当同级时先写的被后写的覆盖，可通过修改Z-index值改变先后层级。
2．从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。

七、 补充：

1）透明色的两种实现方法：
1.通过Rgba调整透明度

2.Opacity: 取值为0~1； 0表示完全透明，1表示不透明

2）通过UL>LI样式修改，完成圆点佩列效果：

3）Border- radius:圆角 值1 (x轴) / 值2 (y轴)，参数之间用”/”分隔
若提供一个参数则4个角相同；若提供两个参数，第一个参数为顶左和下右，第二个参数为顶右和下左（对角原理）。