首页 > Web开发 > 详细

CSS中的定位position属性(absolute,relative,static,fixed)的具体用法

时间:2016-04-17 17:24:38      阅读:249      评论:0      收藏:0      [点我收藏+]

只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流

1、staticposition的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的topleft属性均不起作用。

2、Fixed属性值是相对于浏览器窗口定位的(及视口坐标),设置该属性后的元素是独立的,他脱离文档流,当拖动滚动轴时该元素在浏览器窗口中的位置不会发生变化。时

3、所有的父级元素均没有设置position(除了static属性值以外)时,则当某个子元素positionabsolute时,其topleft都是相对于文档坐标而言的,但是如果有某个父级元素设置了position属性且其值不为static,则topleft都是相对于父级容器而言的。同时当元素设置了绝对定位后将不会在占用原来的空间脱离文档流,普通的文档流元素的布局就像绝对定位的元素不存在一样。   因而利用绝对定位结合z-index可以很好的层叠显示样式 。  

4、当父级元素中有某一级别的设置为了relative的属性值时,则后面子元素的positionabsolute时,topleft都是相对于这一父级而言的(下图是分别是第三级与第一级父级元素设置为relative的情况)。当元素设置了相对定位时,元素本身首先会出现在他出现的位置,然后根据设置的topleft等的值进行偏移,但是不管元素是否移动,他任然占据原有的空间,因此移动元素会导致它覆盖其他的框。

 5、 绝对定位是相对于定位的对象而言的,要调整图片的位置时结合lefttop属性,要居中显示则text-align:水平居中,line-height通过行高设置垂直居中的方式。绝对定位的元素如果没有设置top等属性值是没有作用的。相对定位的元素如果不设置top等属性值则任然在原位置显示。

 

CSS中的定位position属性(absolute,relative,static,fixed)的具体用法

原文:http://www.cnblogs.com/heshan1992/p/5401294.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!