当position为absolue时候，其中的相对宽高是相对它参考的元素来进行计算并进行位置渲染的，并不是相对他的父元素。除了ie6-浏览器以外，ie6是相对于父元素进行宽高的计算，以上都只是宽高的计算参考不同，但是相对定位是的参考点还是position为非static的元素。如果父标签宽高为0则ie6继续上父级元素宽高，并且ie6无法同时设置bottom和top、left和right。
测试代码：
1 html: 2 <div class="main"> 3 4 <div class="container1"></div> 5 6 <div class="container2"></div> 7 8 </div> 9 10 css: 11 12 .main{ 13 14 position: relative; 15 16 height: 300px; 17 18 width: 100%; 19 20 background-color: red; 21 22 border:1px solid #000; 23 24 } 25 26 .container1{ 27 28 margin-top: 100px; 29 30 width: 200px; 31 32 height: 200px; 33 34 background-color: yellow; 35 36 } 37 38 .container2{ 39 40 position: absolute; 41 42 width: 50%; 43 44 height: 50%; 45 46 top:0; 47 48 background-color: green; 49 50 }
实现效果：
ie6：
非ie6：
