首页 > 代码库 > 三层DIV定位
三层DIV定位
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 |
三层DIV定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。