首页 > web前端 > css教程 > 详解Position属性四个值:static、fixed、relative、absolute的区别和用法

详解Position属性四个值:static、fixed、relative、absolute的区别和用法

高洛峰
发布: 2017-03-16 09:52:41
原创
2316 人浏览过

1、static静态定位):默认值。没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了)。

2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其原本位置进行定位。可通过z-index进行层次分级。  

3、absolute(绝对定位):生成绝对定位的元素,相对于第一个含有定位的(除static 定位的)父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行设置。也可通过z-index进行层次分级。

4、fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行设置。也可通过z-index进行层次分级。

 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。即属性值大的堆叠在属性值小的元素上面,不过前提条件是同级元素(注释:Z-index 仅能在定位元素上奏效,元素可拥有负的 z-index 属性值。)


以上是详解Position属性四个值:static、fixed、relative、absolute的区别和用法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板