css中的定位属性position

一样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下，但愿帮助初学者。

在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;}

 

 

position:absolute;绝对定位

以一样的案例来使用绝对定位，默认不做定位时仍是这个样子

当使用绝对定位以后：

 p{ width:400px;}
div{text-align:center; width:200px;height:200px;background:pink;position:absolute;top:30px;left:40px;}

 

一、相对于浏览器定位了，相对于浏览器上面移动30px.左边移动40px;

二、在文字上方显示，表示绝对定位不占位置（就像在空中飞起来同样，因此经常使用绝对定位来实现页面上显示隐藏的效果，哪怕显示在页面上也不会影响布局，好比下拉菜单）

可是，绝对定位还有一个好处就是默认的参照物是浏览器，可是它的参照物是能够修改的，也就是能够设置到底相对于谁去定位，好比下拉菜单确定是相对于本身的父级去定位。

那么设置绝对定位的参照物的使用规则是：父级相对，子级绝对！

也就是说若是一个盒子想相对本身的父级去移动位置的话，那么就给选定好的父级position:relative;本身绝对定位：position：absolute；而且配合方向属性移动 ，top,left,right,bottom.

如今构建一个环境，父级li,要定位的是span：

 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;}

 

 

<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 class="box">
    <div class="box01">box01</div>
    <div class="box02">box02</div>	
</div>

 后面写的盒子定位后会靠最上显示，好比box2

若是经过z-index:整数值；来设置的话，就能够调整box1和box2的层级关系：

	 .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;}

 

 谁的值大，谁的位置就靠上：

 

这里对定位属性进行了简单讲解，但愿帮助须要帮助的人！