图解CSS中position属性的定位用法

CSS中的定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。该模式包括了常规文档流，浮动，和几种类型的 position 定位的元素。
其中，CSS position 属性可以取5种值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
static 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。
一个 static 定位的元素会忽略所有 top，right，bottom，left 以及 z-index 属性所声明的值。为了让你的元素能使用这五个属性，你需要先为它的 position 属性应用这三个值的其中之一： absolute，relative，fixed
position 值为 inherit 的元素和其他所有属性的继承值一样，元素会继承父元素的 position 值。

为了后面能更好地理解，先特将此例的DOM草图画出来：

上面的DOM图，我想大家一定非常容易的理解，下面就一起来主要看position的使用。

第一步：position: static

在CSS中所有元素的“position”属性的默认值都是“static”，因为不需要显式的为每个元素设置“position:static”。此时大家会问，那这个属性值是不是没有任何意义呢？其实不是的，他在CSS中也会起着很大的作用。我们来看一个实例：

比如说你的两个页面，同时存在“div#div-1”，那么此时你在A面中需要对“div#div-1”进行绝对定位；而在B页面中“div#div-1”又不需要进行绝对定位。

A页面中“div#div-1”绝对定位：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表