[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。

可是在IE7 卻發生了這樣的情況。

Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。

<br></br><br></br><br></br> <title>Demo mask overlay</title><br></br> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"><br></br> <style><br></br> #mask {<br></br> width: 100%;<br></br> height: 100%;<br></br> background: #000;<br></br> position: absolute;<br></br> top: 0;<br></br> left: 0;<br></br> /* other browser*/<br></br> opacity: 0.5;<br></br> /* IE 5-7 */<br></br> filter: alpha(opacity=50);<br></br> /* IE 8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";<br></br> } <br></br> #page {<br></br> position: relative;<br></br> border: 1px solid #ccc;<br></br> background: #ccc;<br></br> top: 20px;<br></br> left: 100px;<br></br> width: 80%;<br></br> height: 50px;<br></br> }<br></br> #page .overlay {<br></br> position: absolute;<br></br> top: 50%;<br></br> left: 50%;<br></br> width: 200px;<br></br> height: 200px;<br></br> border: 1px solid #000;<br></br> background: #fff;<br></br> -webkit-border-radius: 5px;<br></br> -moz-border-radius: 5px;<br></br> border-radius: 5px;<br></br> color: #999;<br></br> font-size: 131%;<br></br> z-index: 1;<br></br> } <br></br> </style><br></br><br></br><br></br> <div id="page"><br></br> <h1> I am div </h1><br></br> <div class="overlay"><br></br> <p>This is popup. </p><br></br> </div><br></br> </div><br></br> <div id="mask"><br></br> </div><br></br><br></br><br></br>

從這邊可以發現,在IE 7裡面因為overlay 的上一個層級* page*,有設定relative,導致overlay有繼承行為,因此讓overlay的z-index無法作用。

這樣子思考起來除了IE 7以外的瀏覽器(chrome、safari、Opera、IE 8…)的z-index繼承邏輯似乎有錯誤,沒有看錯吧!?z-index 在IE 7才是標準?

為了幫其他瀏覽器證明一下他們是有繼承概念的,因此幫幾個div加上z-index。

<br></br><br></br><br></br> <title>Demo mask overlay</title><br></br> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"><br></br> <style><br></br> #mask {<br></br> width: 100%;<br></br> height: 100%;<br></br> background: #000;<br></br> position: absolute;<br></br> top: 0;<br></br> left: 0;<br></br> /* other browser*/<br></br> opacity: 0.5;<br></br> /* IE 5-7 */<br></br> filter: alpha(opacity=50);<br></br> /* IE 8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";<br></br><span style="color: red;">z-index: 0;</span><br></br> } <br></br> #page {<br></br> position: relative;<br></br> border: 1px solid #ccc;<br></br> background: #ccc;<br></br> top: 20px;<br></br> left: 100px;<br></br> width: 80%;<br></br> height: 50px;<br></br><span style="color: red;">z-index: 0;</span><br></br> }<br></br> #page .overlay {<br></br> position: absolute;<br></br> top: 50%;<br></br> left: 50%;<br></br> width: 200px;<br></br> height: 200px;<br></br> border: 1px solid #000;<br></br> background: #fff;<br></br> -webkit-border-radius: 5px;<br></br> -moz-border-radius: 5px;<br></br> border-radius: 5px;<br></br> color: #999;<br></br> font-size: 131%;<br></br> z-index: 1;<br></br> } <br></br> </style><br></br><br></br><br></br> <div id="page"><br></br> <h1> I am div </h1><br></br> <div class="overlay"><br></br> <p>This is popup. </p><br></br> </div><br></br> </div><br></br> <div id="mask"><br></br> </div><br></br><br></br><br></br>

修改的部份,如紅字所示,在mask、page都加上了z-index: 0;,輸出結果如下圖。

經過測試後發現,popup已經沉下去mask底下了,表示其他瀏覽器還是會有繼承z-index的動作,因此有底下幾點推論:

  1. IE 7會將父層z-index預設為0。
  2. 其他瀏覽器不會預設z-index。
  3. 並不是z-index設定值越大就一定會在最上層,同時考慮繼承問題。
  4. 使用浮動在最上層的獨立div,盡量靠近body層級。

以上幾點,是最後小小的推論,歡迎大家討論。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn