containing block
0
悬赏园豆：5
[已解决问题]
解决于 2013-12-24 20:38
css code:
.normal{height: 2000px;background: #666;}
.test{position: absolute;top:0;left:0;width: 100%;height: 100%;background: #ff0;}
html code:
<div class="normal"></div>
<div class="test"></div>
这里的test的containing block应该是根元素，但是测试发现高度却是视口的高度？
最佳答案
0
.test的样式 position:absolute ，这里是绝对定位，是以浏览器边界为参照并且脱离Html 流，脱离Html流后不会占用原来的位置，所以normal会占用test原有的位置，所以你可以看到test是在normal之上的,再因为test的height为100% 这里指的就是浏览器的高度。所以就是窗口的高度
收获园豆：5
我的问题就是为什么这个100%是相对浏览器视口的而不是相对根节点
@三剑客:
这是position样式 决定的 absolute 是绝对定位 以浏览器边框为参照，relative 是相对定位 是以父元素为参照 你可以详细了解下 position，不同属性的意思
