CSS z-index 屬性 · W3School CSS 參考手冊

# CSS z-index 屬性 ## 實例設置圖像的 z-index： ``` img { position:absolute; left:0px; top:0px; z-index:-1; } ``` ## 瀏覽器支持所有主流瀏覽器都支持 z-index 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。注釋：元素可擁有負的 z-index 屬性值。注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！ ### 說明該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.zIndex="1" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | auto | 默認。堆疊順序與父元素相等。 | | _number_ | 設置元素的堆疊順序。 | | inherit | 規定應該從父元素繼承 z-index 屬性的值。 | ## TIY 實例 [Z-index](/tiy/t.asp?f=csse_zindex2) Z-index 可用于將在一個元素放置于另一元素之后。 ``` <html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>這是一個標題</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</p> </body> </html> ``` [Z-index](/tiy/t.asp?f=csse_zindex1) 上例中的元素已經更改了 Z-index。 ``` <html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:1 } </style> </head> <body> <h1>這是一個標題</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默認的 z-index 是 0。Z-index 1 擁有更高的優先級。</p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)") HTML DOM 參考手冊：[zIndex 屬性](/jsref/prop_style_zindex.asp "HTML DOM zIndex 屬性")