css中的定位属性position（转）

css中的定位属性position

 

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

在css中定位属性position的运用在页面中是很常用的，特别是一些结合js来实现的一些特效经常会用到定位属性，比如鼠标滑过显示被隐藏的盒子， banner的切换，还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现，但是上一次着重只写了jquery.

那么这次我想将定位属性的运用拿来说一下。

定位属性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;}

 

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

 

这里对定位属性进行了简单讲解，希望帮助需要帮助的人！