css中position属性及z-index属性
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。
1.position: static
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
2.position: fixed
fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。
3.position: relative
相对定位元素的定位是相对它自己的正常位置的定位。元素设置相对定位之后，仍存在文档流中，不会对下面的其他元素产生影响
关键：如何理解其自身的坐标呢？
// hmtl如下： <h2>这是位于正常位置的标题</h2> <h2 class="pos_bottom">这个标题相对于其正常位置向下移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> // css代码如下： .pos_bottom{position:relative; bottom:-20px;} .pos_right{position:relative;left:50px;}
效果图如下：
即bottom:-20px;；向下移动。 left:50px;向右移动。
即可以理解为：移动后是移动前的负的位置。 如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。
4.position: absolute
绝对定位的元素相对于最近的已定位父元素(父元素的position可以为 relative/absolute/fixed )，如果元素没有已定位的父元素，那么它的位置相对于<html>。
5.position: sticky
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；
简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
6.z-index属性
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
