对position的几点理解

分类及定义

在W3C中，position 属性规定元素的定位类型，css实例：

.box{
    position：relative;
}

它可能的值包括以下五种：

1. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及"bottom" 属性进行规定。
2. fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。
   元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3. relative（相对定位）：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
4. static（默认值）：没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5. inherit（继承）：规定应该从父元素继承 position 属性的值。

以上是官方的定义，仔细研究不难发现一些值得注意的事项，以下也包括我在工作中总结的一些技巧。

一、绝对定位的父级需要相对定位嘛？

记得刚入行，培训老师讲到这里，给我们的要求是：只要某个模块需要定位，必须给父级position:relative；在该模块加上position:absolute。当时比较单纯，老师说什么就是什么，以至于很长一段时间根本不知其所以然还依然在这么用。后来偶然看到官方的文档才发现这是不正确的做法。
‘生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。’ 这是官方的定义，所以只要它的父级（只要是父级，不一定是直系父级）有添加除static定位以外的任何一个属性都是可以实现的，不一定只能是relative。

二、相对定位你理解了嘛？

position:relative是个功能强大的属性。添加该属性的元素是相对于它的正常位置进行的定位，正常位置，就是其本来在文档流里面的位置。
看下面两张图的比较：

未添加relative

这是正常文档流里面的两个div排列方式，结构如下：

<div class="box1">第一个盒子</div>
<div class="box2">第二个盒子</div>

css如下：

.box1{
        width:100px;
        height:100px;
        background: #000;
        margin-bottom:20px;
        color: #fff;
    }
    .box2{
        width:100px;
        height:100px;
        margin-bottom:20px;
        background: #ff0000;
        color: #fff;
    }

而添加relative属性的div呢，位置发生了变化：

添加relative

这里给第二个div添加了class：

<div class="box1">第一个盒子</div>
<div class="box2 pr">第二个盒子</div>

它的css为：

.pr{
        position: relative;
        left:100px;
        top:50px;
    }

很明显看出了它们的区别，第二个添加position:relative;的div相对于它本来的位置向左偏移100px，向下偏移50px，如css规定的那样。

三、其他注意事项

• fixed是相对于浏览器窗口进行的绝对定位，常用于固定头部导航条，固定底部元素，以及侧边栏的一些固定工具条等等，非常实用。
• 添加定位的元素会涉及到优先级的问题，有时碰到添加定位而没有显示的元素，可以查看是否未添加z-index属性导致的。z-index越高，优先级越高，越在上面显示。