margin負值引起的層級（z-index）問題

日期：2013-11-29  來源：攀枝花惠康網絡公司

不知道是不是該取這個問題，若有分歧定見請留言賜正，感謝！

在IE6和IE7下，內層的容器被外層籠蓋，如圖所示：

先來看這么一段代碼：

<div style="height:100px;width:200px; border: solid 1px black; ">
      <div style="background-color:Red;margin-top: -5px ">
        <a href=http://www.css88.com/archives/"http://www.css88.com/">愚人碼頭</a></div>
    </div>

；(轉載請注明出處：WEB前端開發 http://www.css88.com/)

在IE8和ff下，外層的容器被內層籠蓋，如圖所示：

；(轉載請注明出處：WEB前端開發 http://www.css88.com/)

真是瘋狂啊，如不美觀要達到IE8的外層的容器被內層籠蓋的效不美觀，ie7可以經由過程觸發內層的layout解決，，可是IE6卻不行，只能在內層使用position:relative來解決問題，當然position:relative也解決ie7的問題，因為position:relative自己就能觸發layout。(轉載請注明出處：WEB前端開發 http://www.css88.com/)

<div style="height:100px;width:200px; border: solid 1px black; ">
      <div style="background-color:Red;margin-top: -5px;position:relative">
        <a href=http://www.css88.com/archives/"http://www.css88.com/">愚人碼頭</a>      </div>
    </div>

看代碼：

當然要IE8、FF達到IE6、IE7的效不美觀就只要在外層加overflow:hidden 就可以了，看代碼。(轉載請注明出處：WEB前端開發 http://www.css88.com/)

<div style="height:100px;width:200px; border: solid 1px black; overflow:hidden ">
      <div style="background-color:Red;margin-top: -5px;">
        <a href=http://www.css88.com/archives/"http://www.css88.com/">愚人碼頭</a>      </div>
    </div>