WEB前端使用CSS中position的几个属性值

static:无特殊定位，对象遵循HTML定位规则

relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置?0?2

absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框?0?2

fixed:IE5.5及NS6尚不支持此属性

1. position:static

所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

#div-1 {

position:static;

}

2. position:relative

如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

#div-1 {

position:relative;

top:20px;

left:-40px;

}

3. position:absolute

当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

4. position:fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

未经允许不得转载：爱前端网 » WEB前端使用CSS中position的几个属性值