css 定位布局-Static ,Relative,Absolute,Fixed,Sticky 五大定位模式实现自由布局

**

Static 😗*静态定位，position的默认定位，也是css 默认的布局方式，从上到下从左到右属于正常的文档流
Relative：相对定位，是在确定元素的默认位置之后，通过left,top,bottom,right,来设置位置的偏移，但是元素所占的空间还保留在原位，其他元素不会挤占他原本的空间，

Absolute：绝对定位，会把元素移除正常的文档流，后边的元素会挤占原本的空间，而他自己则覆盖在挤在他空间的上方，通过left,top,bottom,right,来设置位置的偏移，与relative不同的是这些属性是相对于包含他的元素偏移的，什么是包含元素呢，如果这个元素的所有父级元素都没有设置position或者relative,transform,perspective，那么包含元素就是包含html元素的容器，也就是说是浏览器的窗口，这是left和top是相当于浏览器左上角偏移的，如果父级元素中有position,relative,transform,perspective,那么包含元素就是这些，那么包含元素就是这些与他最近的设置了这些属性的元素，他是相对于父级元素的padding和边界进行位置偏移的，无论父级元素的内间距有多大，边框与padding交界处开始计算偏移，我们通常使用relative来设置包含元素，他不会影响正常的文档流，absolute是用途最广的定位方式，可以实现弹出层，叠加，不规则的位置等布局形式。

**Fixed：**固定定位，和absolute定位类似，只是他的包含元素是当前浏览器窗口，当通过left,top,bottom,right,属性设置偏移之后，无论页面怎么滚动，他都会固定在同一个位置，适合用于固定浮窗，导航条的布局，absolute和fixed这种脱离文档里的定位放置，会把元素的宽高设置成内容的宽高，我们可以通过设置left:0,right:0,来让宽度占满包含容器，也可以设置top：0，bottom:0来让高度占满包含容器，

**Sticky：**相当于relative和fixed的结合体，可以让元素在距离浏览器窗口0位置时候，把它变成固定在这个位置，而其他情况下都还在正常的文档流中，通过left,top,bottom,right,来分别设置距离浏览器左上右下多少像素时固定住
**z-index:**除了Static默认定位后，其他定位方式设置了偏移后，很可能覆盖在其他元素的上面，比如说一个包含元素中同时有两个absolute元素，那么后定义的absolute元素会覆盖先定义的上边，如果让先定义的在上边可以给他设置较大的z-index数值来实现，z-index是z轴方向的偏移，浏览器到人眼的方向数值越大，离人眼越近，所以会覆盖在数值小的上边，所有定位的元素，除了Static外，都可以通过z-index设置z轴偏移，可以设置正数或者负数，需要注意的是如果两个定位元素，分别在两个不同的包含元素中，并且这两个包含元素也设置了z-index的话，那么这两个元素的堆叠顺序就取决于包含元素

这些就是css的定位方式，他们都有特定用途，另外通过设置z-index来设置z-index的堆叠顺序。