CSS定位简述

CSS (Positioning)定位属性可以使我们对元素进行定位，定位的基本原理很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
** CSS 定位原理**
position 属性
1.static： 静态定位，默认值（无定位）
2.relative ： 相对定位
a：参照物为自身的默认位置，定位后自己原来的位置会被保留。
b：占据空间
c：不会脱离文档流
3.absolute： 绝对定位
a：若没有参照物，则参照物为整个整个文档（HTML，body）
b：添加绝对定位的元素，会脱离整个文档流，破坏布局空间
c：可以让内连元素支持宽高
d：默认情况下参照物为已做定位的父元素
绝对定位设置方法
设置包含快（绝对定位的参照物），给要做绝对定位的父元素（参照物）添加position：relative让其形成参照物，要做定位的子元素添加：position：absolute，通过left，right，top，bottom来控制子元素的位置从而达到定位目的。
定位元素的层次关系
z-index：value，默认值为auto
数值越大越靠上显示（支持负数）
4.fixed： 固定定位
参照物为浏览器窗口，通过left，right，top，bottom来控制定位元素在浏览器窗口的位置，设置在那就固定在那，不会随浏览器的滚动条变化。
让一个元素在浏览器窗口上下作业居中
a：
position：fixed；
left：50%;
top;50%;
margin-left:-50px;

b: position：fixed；
left:0; right:0;
top:0;bottom:0;
margin:auto;
粘性定位
sticky 粘性定位
特点：参照物为position：relative和 position：fixed；的结合
当页面没有触发滚动条的时候执行的效果是position：relative；反之则是position：fixed；只适用top，left两个位置。