z-index 應用簡單總結

時間 2019-11-24

標籤 index 應用簡單總結简体版

原文原文鏈接

作過頁面佈局的同窗對z-index屬性應該是很熟悉了，z-index是針對網頁顯示中的一個特殊屬性。由於顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。爲了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關係。css

z-index值較大的元素將疊加在z-index值較小的元素之上。對於未指定此屬性的定位對象，z-index 值爲正數的對象會在其之上，而 z-index 值爲負數的對象在其之下。html

簡單演示

<div style="width:200px;height:200px;background-color:#0e0;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>

兩個DIV，第二個向上移動50px，正常狀況應該是這樣的瀏覽器

第二個div遮住了第一個div，對第二個添加z-index屬性佈局

<div style="width:200px;height:200px;background-color:#0e0;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;z-index:-5;"><div>

結果就會變成這個樣子，z-index 最簡單的應用就是這樣spa

只對定位元素有效

z-index屬性適用於定位元素（position屬性值爲 relative 或 absolute 或 fixed的對象），用來肯定定位元素在垂直於顯示屏方向（稱爲Z軸）上的層疊順序，也就是說若是元素是沒有定位的，對其設置的z-index會是無效的。3d

<div style="width:200px;height:200px;background-color:#0e0;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;z-index:10;"><div>

雖然第一個div的z-index比第二個div大，可是因爲第一個div未定位，其z-index屬性未起做用，因此仍然會被第二個div覆蓋。code

相同z-index誰上誰下

相同的z-index其實有兩種狀況htm

1.若是兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那麼按文檔流順序，後面的覆蓋前面的。對象

<div style="position:relative;width:200px;height:200px;background-color:#0e0;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>

2.若是兩個元素都沒有設置z-index，使用默認值，一個定位一個沒有定位，那麼定位元素覆蓋未定位元素blog

<div style="position:relative;top:50px;width:200px;height:200px;background-color:#0e0;"></div>
<div style=" width:100px;height:100px;background-color:#00e;"><div>

父子關係處理

若是父元素z-index有效，那麼子元素不管是否設置z-index都和父元素一致，會在父元素上方

<div style="position:relative;width:200px;height:200px;background-color:#0e0;z-index:10;">
        <div style="position:relative;width:100px;height:100px;background-color:#00e;z-index:-5;"><div>
    </div>

雖然子元素設置z-index比父元素小，可是子元素仍然出如今父元素上方

若是父元素z-index失效（未定位或者使用默認值），那麼定位子元素的z-index設置生效

<div style="position:relative;width:200px;height:200px;background-color:#0e0;">
        <div style="position:relative;width:100px;height:100px;background-color:#00e;z-index:-5;"><div>
</div>

子元素z-index=-5生效，被父元素覆蓋

兄弟之間子元素

若是兄弟元素的z-index生效，那麼其子元素覆蓋關係有父元素決定

<div style="position:relative;width:100px;height:100px;background-color:#0e0;z-index:5;">
        <div style="position:relative;width:50px;height:250px;background-color:#00e;z-index:50;"></div>
    </div>

    <div style="position:relative;width:100px;height:100px;background-color:#0e0;z-index:10;margin-top:4px;">
        <div style="position:relative;width:30px;height:150px;background-color:#e0e;z-index:-10;"></div>
    </div>

雖然第一個div的子元素的z-index比較高，可是因爲其父元素z-index比第二個div低，因此第一個div子元素會被第二個div及其子元素覆蓋

應用

常常會有這樣一種錯誤在table中最後各行一個td放一個div，點擊彈出子菜單作一些刪除、修改什麼的操做，可是每次彈出的菜單都會被下面各行的div覆蓋,像下面這張圖同樣，彈出的菜單沒有在頁面最上方。

寫個簡單的例子看看

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
            
            .menu
            {
                background-color:#0e0;
                position:relative;
                z-index:10;
            }
            
            .options
            {
                display:none;
                position:absolute;
                top:
                z-index:30;
            }
            
            .options div
            {
                background-color:#00e;
            }
        </style>
    </head>
    <body>
    <table border="1" cellpadding="4px" cellspacing="0">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Options</th>
        </tr>
        <tr>
            <td>Byron</td>
            <td>24</td>
            <td>
                <div class="menu" >
                    <div>Options</div>
                    <div class="options" style="display:block;position:absolute;top:20px;">
                        <div>Opion1</div>
                        <div>Opion2</div>
                        <div>Opion3</div>
                        <div>Opion4</div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Byron</td>
            <td>24</td>
            <td>
                <div class="menu">
                    <div>Options</div>
                    <div class="options" >
                        <div>Opion1</div>
                        <div>Opion2</div>
                        <div>Opion3</div>
                        <div>Opion4</div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Byron</td>
            <td>24</td>
            <td>
                <div class="menu">
                    <div>Options</div>
                    <div class="options" >
                        <div>Opion1</div>
                        <div>Opion2</div>
                        <div>Opion3</div>
                        <div>Opion4</div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    </body>
<html>

指望樣式

實際樣式

這時候習慣於增大options 的z-index卻發現於事無補，爲何呢？由於每一個menu的z-index相同，它們的層疊順序按文檔流順序，不管子元素z-index調到多大，上面menu的options仍是會被下面menu遮蓋。這時候個人作法通常是把options放到外面，全部的menu用一個，使menu與options沒有父子關係，或者乾脆在點擊menu的時候把它的z-index調大，這樣其子元素就不會被遮蓋住了。

最後

本文的例子都是以符合W3C的Chrome瀏覽器作驗證，但在IE6，7 z-index的默認值並非auto而是0，這樣會致使不少奇怪現象，這時候就須要考慮這點了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。