position定位产生的两个问题

定位元素有下面的两个问题，在做页面时会经常碰到，为了备忘

1.position:relative;如果一个元素的子元素或孙元素有position:relative属性的话，overflow:hidden;不能隐藏子元素，需要将这个元素设置position:relative;（IE6）

例：

<style type="text/css">

   .test1{width:200px;overflow:hidden;}

  .test2{width:8000px;position:relative;}

</style>

<div class="test1">

       <div class="test2"></div>

</div>

2.position:absolute;定位元素的height:100%;那这个元素的高度是等于以谁为参考元素的高度

例：

<style type="text/css">

   .test1{position:relative;height:200px;}

  .test2{position:absolute;height:100%;top:0;left:0;}

</style>

<div class="test1">

       <div>

　　　　<div class="test2"></div>

          sssssssssssss<br/>

         test<br/>

     </div>

</div>

那么此时：test2的高度是200px;因为test2已经脱离了正常文档流程，是以test1为基准对齐的，所以要按test1计算，如果给test2的父元素设置position:relative;那么test2的高度就是两行文字的高度

转载于:https://www.cnblogs.com/xiaohui108/archive/2011/04/03/2004254.html