position定位产生的两个问题

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

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

例:

<style type="text/css">

   .test1{200px;overflow:hidden;}

  .test2{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/p/2004254.html