z-index 第三頁

z-index 3

z-index 無效的情形。下面的範例中 DIV 元素 設為 z-index:5，而 IMG 元素 設為 z-index:0；但是 DIV 元素並沒有設為 position:relative 或 absolute, fixed，所以其設定無效；而圖片依然蓋住 DIV 的文字。但是 DIV 的子元素 P 則會蓋在圖上。 <style type='text/css'> .cvr {height:240px} .cvr DIV {width:200px; height:200px; color:black; z-index:5; background:white; } .cvr IMG {position:relative; top:-180px; left:40px; z-index:0; } </style> <div class=cvr> <div> 網路遊戲，線上遊戲，好玩遊戲，球類遊戲， <p style='position: relative; z-index:4'> 金錢遊戲，數獨遊戲，生存遊戲，</p> 射擊遊戲，益智遊戲，武打遊戲。 </div> <img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div>

保護圖片不被盜拷。此法是用 DIV 元素 的矩形格子蓋住要保護的圖片，矩格的大小與圖片相同為宜。DIV 的內容是著作權保護文字。此法利用 :HOVER 動態變更 z-index；當滑鼠移入圖片區時，會出現保護文字。最重要的是，在圖片上點擊滑鼠右鍵，無法將圖片存檔。但是必須強調一點，此法不能達成百分之百保護。基本上，在網路傳輸的資料，不可能作到百分之百保護。下例中，由於 IE6 不支援 :hover，所以沒有效果。另外一個版本是用 opacity 作的保護功能，該法在 IE6 也有保護功能，但是無法隱藏文字。另外，也可以使用 javascript 作保護。 <style type='text/css'> .crp {height:220px} .crp DIV {position:relative; width:200px; height:200px; font-size:14px; background:white; color:black; } .crp IMG {position:relative; top:-200px; z-index:2; padding:0px; border:none; } .crp DIV:hover {z-index:5;} .crp IMG:hover {z-index:-1;} </style> <div class=crp> <DIV>©Copyright 2008, by ant2legs, All Rights Reserved.<br /> 按滑鼠右鍵無法將圖片存檔。</DIV> <img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div>

javascript 應用。可以用 style 物件 的特徵 zIndex 讀取或設定特徵值。 <div style='z-index:auto' id='z'> 測試 </div> <script type='text/javascript'> var os=document.getElementById('z').style; document.write( os.zIndex ); </script>

• 上例，IE6 輸出 '0'；Firefox, Safari, Chrome 輸出 'auto'。

z-index（你正在看 第三頁）

:

第一頁

第二頁

第三頁