css中的定位position
在css中定位属性position的运用在页面中是很常用的，特别是一些结合js来实现的一些特效经常会用到定位属性，比如鼠标滑过显示被隐藏的盒子， banner的切换，
定位属性position常用的取值：relative/absolute/fixed;一般配合方向属性使用：top,left,right,bottom.
position:relative;相对定位
相对定位是占位置的定位方式，它的参照物是自己；
首先将一个粉色的盒子div放在两段文字中间，不作任何位置的调整：
1 2 | p{ width:400px;}div{text-align:center; width:200px;height:200px;background:pink;} |
1 2 3 4 5 | <p>因为是北方，入三月以来，都是阳光洒满整管自己心想如何，自然现象是该来还来。这一场春雨，和风而来，先是淅沥呜咽，继而雨声成片，瞬间天地朦胧模糊，气温骤低，街上行人渐稀，都是能躲的就躲，能坐车的舞啊。</p><div>相对自己移动位置</div><p> 在早，我小时候，夏季的雨天，织上睡得小脸粉团，嘴角挂着微笑，玩耍兴奋都带到梦里去了啊。</p> |
接着把粉色盒子设置一个相对定位，那么注意观察它移动的位置是在原来自己的基础上去移动的，并且是占位置的定位方式：
1 | p{ width:400px;}<br> div{text-align:center; width:200px;height:200px;background:pink;position:relative;top:30px;left:40px;} |
position:absolute;绝对定位
以同样的案例来使用绝对定位，默认不作定位时还是这个样子
当使用绝对定位之后：
1 2 | p{ width:400px;}div{text-align:center; width:200px;height:200px;background:pink;position:absolute;top:30px;left:40px;} |
1、相对于浏览器定位了，相对于浏览器上面移动30px.左边移动40px;
2、在文字上方显示，表示绝对定位不占位置（就像在空中飞起来一样，所以常用绝对定位来实现页面上显示隐藏的效果，哪怕显示在页面上也不会影响布局，比如下拉菜单）
但是，绝对定位还有一个好处就是默认的参照物是浏览器，但是它的参照物是可以修改的，也就是可以设置到底相对于谁去定位，比如下拉菜单肯定是相对于自己的父级去定位。
那么设置绝对定位的参照物的使用规则是：父级相对，子级绝对！
也就是说如果一个盒子想相对自己的父级去移动位置的话，那么就给选定好的父级position:relative;自己绝对定位：position：absolute；并且配合方向属性移动 ，top,left,right,bottom.
现在构建一个环境，父级li,要定位的是span：
1 2 | li{text-align:center; width:80px;height:30px;line-height:30px;background:#333;float:left;margin:0 5px;position:relative;}span{width:78px;height:100px;background:rgba(0,153,0,0.7);border:1px solid #fff; border-top:0; position:absolute;top:30px;left:0;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul> <li> <a href="#">首页</a> <span></span> </li> <li> <a href="#">案例</a> </li> </ul><p>因为是北方，入三月以来，都是阳光洒满整管自己心想如何，自然现象是该来还来。这一场春雨，和风而来，先是淅沥呜咽，继而雨声成片，瞬间天地朦胧模糊，气温骤低，街上行人渐稀，都是能躲的就躲，能坐车的舞啊。</p> |
运行：（li是背景深灰色的导航，白色文字是a标签的文字，绿色透明的是类似下拉菜单的span，span是通过父级li相对定位，也就是确定参照物是li之后，自己绝对定位，并且相对父级li的移动距离为top:30px;left:0;）
如果top:0;的话，那么应该就是和父级顶部紧挨着，所以看出span绝对定位的参照物是使用了相对定位的父级li：
1 2 | li{text-align:center; width:80px;height:30px;line-height:30px;background:#333;float:left;margin:0 5px;position:relative;}span{width:78px;height:100px;background:rgba(0,153,0,0.7);border:1px solid #fff; border-top:0; position:absolute;top:0px;left:0;} |
position：fixed；固定定位
这个固定定位的参照物是浏览器，常用在固定在浏览器某一个位置上的导航条，提示，或者弹窗等，只要使用了这个固定定位，不论浏览器类容有多少，就算滑动浏览器滑块，使用固定定位的的盒子永远就在固定的位置：
例如淘宝网上的搜索栏和右边指示栏：
z-index：调整定位的盒子的层级或者说是上下关系
既然说到定位，就少不了介绍一下z-index这个属性；这个属性是调整使用过定位属性的盒子的层级关系，
例如：两个子级都相对于父级绝对定位
1 2 3 | .box{width:200px;height:200px;background:pink;position:relative;margin:0 auto;} .box01{ width:100px;height:100px;background:green;position:absolute;top:20px;left:20px;}.box02{ width:100px;height:100px;background:red;position:absolute;top:40px;left:40px;} |
1 2 3 4 | <div class="box"> <div class="box01">box01</div> <div class="box02">box02</div> </div> |
后面写的盒子定位后会靠最上显示，比如box2
如果通过z-index:整数值；来设置的话，就可以调整box1和box2的层级关系：
1 2 3 | .box{width:200px;height:200px;background:pink;position:relative;margin:0 auto;} .box01{ width:100px;height:100px;background:green;position:absolute;top:20px;left:20px;z-index:2;}.box02{ width:100px;height:100px;background:red;position:absolute;top:40px;left:40px;z-index:1;} |
谁的值大，谁的位置就靠上：
本文转载至他人，为尊重原创附上原文链接：http://www.cnblogs.com/xcaocao/p/5663039.html
