position:absolute溢出處理

今天在作佈局的時候發現把table設置了position:absolute後 overflow竟然無論用了，溢出的部分依然溢出。

百度後，纔想起來... ...

position後，元素已經和父元素不在一個流裏面了，而overflow只能對在同一流中的元素起做用。

簡單說，

就是 table 已是移民火星了，而table外面的div 依然還在地球，那麼身在地球的div天然是管不了身在火星的table咯。

因此解決辦法，

既然table移民了，那麼它爹div也跟着移個民不就能夠管着table了嗎？

當子元素改變當前流後，父元素也跟着改變當前流，那麼overflow就能夠生效了。

下面引用一個例子：

<style>  
  
.box{  
  
    width:200px;  
  
    height:150px;  
  
    overflow:hidden;  
  
    border:2px solid #000;  
  
    float:left;  
  
    margin-right:20px;  
  
}  
  
.relative{  
  
    position:relative;  
  
}  
  
.div{  
  
    width:200px;  
  
    height:100px;  
  
    background:#FF5400;  
  
    margin-top:100px;  
  
    position:absolute;  
  
}  
  
.zi{  
  
    width:200px;  
  
    height:300px;  
  
    background:#FF0000;  
  
}  
  
</style>  
  
<div class="box">  
  
高300px的子元素溢出隱藏  
  
<div class="zi"></div>  
  
</div>  
  
<div class="box">  
  
不帶relative  
  
<div class="div"></div>  
  
</div>  
  
<br><br><br><br><br><br>  
  
<div class="box relative">  
  
帶上relative  
  
<div class="div"></div>  
  
</div>  

效果圖：

請原諒我懶的本身寫demo。借下別人的demo用用。