标签: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 | relative或absolute | relative | 内容区定位 | 以次外层容器为定位基准 |
4 | relative或absolute | absolute | 内容区定位 | 以次外层容器为定位基准 |
最外层(父父容器) | 次外层(父容器) | 组件(position=relative)定位 | ||
1 | 顶0%与底0%作用相等,底边0%位置即组件在父容器中流动到的最后位置下底边的位置 | |||
2 | 底边100%的位置,在0%底边位置基础上再上移父容器内容高度(不包括边框) | 如父容器高300,上下边框各10px高,则内容区高度为280px。 | ||
3 | ||||
4 |
标签:css
原文地址:http://blog.csdn.net/hongweigg/article/details/39230689