码迷,mamicode.com
首页 > 其他好文 > 详细

三层DIV定位

时间:2014-09-12 17:17:33      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:css

CSS的position有三种属性:static, relative, absolute,如果DIV套DIV,达到多层,这些层间的定位关系又是怎样的呢?

1、只要父容器的postion属性不为static,组件就会以父容器作为定位基准,否则找上一级可定位的容器作为基准。

2、上一级定位容器的relative和absolute对应的定位位置有差异,一个不包含边框宽度,一个包含边框宽度


注意:在定位的过程中,在设置大小的前提下,不能同时设置top和bottom属性,否则显示结果会出乎意料,在设置一个属性时,清除另一个属性,方法:

div.style.top = ‘‘;

不能用:

delete div.style.top。


下面是三层DIV定位的关系表:

  最外层(父父容器) 次外层(父容器) 组件(position=absolute)定位 说明
1 relative static 内容区+边框宽度定位 最外层容器为定位基准,与margin属性无关
2 absolute static 内容区定位 最外层容器为定位基准,与margin属性无关
3 relativeabsolute relative 内容区定位 以次外层容器为定位基准
4 relativeabsolute absolute 内容区定位 以次外层容器为定位基准
         
  最外层(父父容器) 次外层(父容器) 组件(position=relative)定位  
1     顶0%与底0%作用相等,底边0%位置即组件在父容器中流动到的最后位置下底边的位置  
2     底边100%的位置,在0%底边位置基础上再上移父容器内容高度(不包括边框) 如父容器高300,上下边框各10px高,则内容区高度为280px
3        
4        

三层DIV定位

标签:css

原文地址:http://blog.csdn.net/hongweigg/article/details/39230689

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!