建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS z-index：元素堆疊
通常我們可能會認為 HTML 網(wǎng)頁是個二維的平面，因為頁面中的文本、圖像或者其它元素都是按照一定順序排列在頁面上的，每個元素之間都有一定的間隙，不會重疊。然而，實際的網(wǎng)頁其實是三維的，元素之間可能會發(fā)生堆疊（重疊），您可以通過 CSS 中的 z-index 屬性來設(shè)置元素的堆疊順序，如下圖所示：
圖：元素堆疊演示
圖：z-index 屬性演示
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比利川網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式利川網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋利川地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。
圖：元素堆疊演示
每個元素都有一個默認的 z-index 屬性，將 z-index 屬性與 position 屬性相結(jié)合可以創(chuàng)建出類似 PhotoShop 中的圖層效果。z-index 屬性可以設(shè)置元素的層疊級別（當元素出現(xiàn)重疊時，該元素在其它元素之上還是之下），擁有更高層疊級別的元素會處于層疊級別較低的元素的前面（或者說上面）。
通過 z-index 屬性您可以創(chuàng)建更加復雜的網(wǎng)頁布局，z-index 屬性的可選值如下表所示：
| 值 | 描述 |
|---|---|
| auto | 默認值，堆疊順序與父元素相等 |
| number | 使用具體數(shù)值（整數(shù)）設(shè)置元素的堆疊順序 |
| inherit | 從父元素繼承 z-index 屬性的值 |
關(guān)于元素的層級關(guān)系有以下幾點需要注意：
- 對于未設(shè)置 position 屬性的元素或者 position 屬性的值為 static 時，后定義的元素會覆蓋前面的元素；
- 對于設(shè)置有 position 屬性且屬性值不為 static 的元素，這些元素會覆蓋沒有設(shè)置 position 屬性或者 position 屬性值為 static 的元素；
- 對于 position 屬性值不為 static 且定義了 z-index 屬性的元素，z-index 屬性值大的元素會覆蓋 z-index 屬性值小的元素，即 z-index 屬性值越大優(yōu)先級越高，若 z-index 屬性值相同，則后定義的元素會覆蓋前面定義的元素；
- z-index 屬性僅在元素定義了 position 屬性且屬性值不為 static 時才有效。
【示例】下面通過具體代碼來演示 z-index 屬性的使用：
one
two
three
four
five
運行結(jié)果如下圖所示：
圖：z-index 屬性演示
當前題目：CSS z-index：元素堆疊
分享鏈接：http://www.5511xx.com/article/cojchoj.html
