分类及定义
在W3C中，position 属性规定元素的定位类型，css实例：
.box{
position：relative;
}
它可能的值包括以下五种：
- absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及"bottom" 属性进行规定。
- fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 - relative（相对定位）：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
- static（默认值）：没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- 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越高，优先级越高，越在上面显示。
网友评论