同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下，希望帮助初学者。
在css中定位属性position的运用在页面中是很常用的，特别是一些结合js来实现的一些特效经常会用到定位属性，比如鼠标滑过显示被隐藏的盒子， banner的切换，还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现，但是上一次着重只写了jquery.
那么这次我想将定位属性的运用拿来说一下。
定位属性position常用的取值：relative/absolute/fixed;一般配合方向属性使用：top,left,right,bottom.
position:relative;相对定位
相对定位是占位置的定位方式，它的参照物是自己；
首先将一个粉色的盒子div放在两段文字中间，不作任何位置的调整：
p{ width:400px;}div{text-align:center; width:200px;height:200px;background:pink;}
<p>因为是北方，入三月以来，都是阳光洒满整管自己心想如何，自然现象是该来还来。这一场春雨，和风而来，先是淅沥呜咽，继而雨声成片，瞬间天地朦胧模糊，气温骤低，街上行人渐稀，都是能躲的就躲，能坐车的舞啊。</p><div>相对自己移动位置</div><p> 在早，我小时候，夏季的雨天，织上睡得小脸粉团，嘴角挂着微笑，玩耍兴奋都带到梦里去了啊。</p>
接着把粉色盒子设置一个相对定位，那么注意观察它移动的位置是在原来自己的基础上去移动的，并且是占位置的定位方式：
p{ width:400px;}
div{text-align:center; width:200px;height:200px;background:pink;position:relative;top:30px;left:40px;}
当使用绝对定位之后：
p{ width:400px;}div{text-align:center; width:200px;height:200px;background:pink;position:absolute;top:30px;left:40px;}
1、相对于浏览器定位了，相对于浏览器上面移动30px.左边移动40px;
2、在文字上方显示，表示绝对定位不占位置（就像在空中飞起来一样，所以常用绝对定位来实现页面上显示隐藏的效果，哪怕显示在页面上也不会影响布局，比如下拉菜单）
<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：
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这个属性；这个属性是调整使用过定位属性的盒子的层级关系，
例如：两个子级都相对于父级绝对定位
.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;}
<div > <div >box01</div> <div >box02</div> </div>
后面写的盒子定位后会靠最上显示，比如box2
我知道了 