CSS_布局(position定位：static，relative，absolute，fixed，sticky，z-index)

CSS定位（position）：

/* 静态定位: 默认值。正常文档流，从上到下，从左到右 */
position:static; 

/* 相对定位：相对于该元素的默认位置。
确定它的默认位置之后，通过left,top,right,bottom属性设置位置的偏移,偏移是相对于默认位置的。
但是它所占用的空间还保留在原位(默认位置),其他元素不会挤占它原本的空间 */
.box{
position:relative; 
left:15px;
top:10px
}

/* 绝对定位：相对于父级盒子的定位。用于：弹出层、叠加、不规则位置、等布局。
会把元素移出正常的文档流，后边的元素会挤占他的空间，而它自己则会覆盖在挤占它元素的上方，
通过left,top,right,bottom属性设置位置的偏移,与relative相比，这个偏移是相对于父级盒子的*/
.box{
position:absolute; 
left:15px;
top:10px
}

/* 固定定位：相对于浏览器窗口的定位。用于：固定浮窗、导航条、等布局。
与absolute定位类似，不同的是包含元素是当前浏览器窗口，
通过left,top,right,bottom属性设置位置的偏移之后，不论页面怎么滚动，都会固定在页面的同一个位置 */
.box{
position:fixed ; 
left:15px;
top:10px
}

/* 说明：
absolute和fixed 这种脱离正常文档流的定位方式，会把它的宽高设置成内容的宽高，
通过left:0;right:0;让宽度占满包含容器。
通过top:0;bottom:0;让高度占满包含容器。
*/

/* css3属性：相当于relative和fixed的结合体。用于：侧边栏、底部内容、导航、等布局。
目标区域在屏幕中可见时，就像position:relative;距离浏览器一定位置。
页面滚动超出目标区域时，就像position:fixed;固定在这个位置。
可以让它距离浏览器窗口一定位置时，把他变成固定在这个位置，而其他情况下还在正常的文档流中，通过left,top,right,bottom属性设置距离浏览器多少像素时把它固定住 */
.box{
position:sticky;
top:10px
}

层叠顺序（z-index）：
设置Z轴方向上的偏移(默认值是0，也可以设置成负数)，
也就是浏览器到人眼的方向，数值越大，离人眼越近，所以数值大的覆盖在数值小的上面。

/* 除了static默认定位之外，其他定位，在设置了偏移之后很可能会覆盖在其他元素之上，
比如:有两个absolute定位在同一位置，后设置的absolute元素会覆盖在先定义的上面，
如果需要先定义的元素在上面，可以通过设置较大的偏移数值（z-index: 5;）来实现 */

/* 第一个absolute定位的元素*/
.box1{ 
position:absolute ;
left:15px;
}
/* 第二个absolute定位的元素*/
.box2{
position:absolute ;
left:15px;
z-index: 5;
}