久久本道综合色狠狠五月,国产精品国产亚洲看不卡,在线看免费av无码

做過頁面布局的同學(xué)對(duì)z-index屬性應(yīng)該是很熟悉了，z-index是針對(duì)網(wǎng)頁顯示中的一個(gè)特殊屬性。因?yàn)轱@示器是顯示的圖案是一個(gè)二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區(qū)別。表示一個(gè)元素在疊加順序上的上下立體關(guān)系。

z-index值較大的元素將疊加在z-index值較小的元素之上。對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下。

簡(jiǎn)單演示

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

兩個(gè)DIV，第二個(gè)向上移動(dòng)50px，正常情況應(yīng)該是這樣的

第二個(gè)div遮住了第一個(gè)div，對(duì)第二個(gè)添加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>

結(jié)果就會(huì)變成這個(gè)樣子，z-index 最簡(jiǎn)單的應(yīng)用就是這樣

只對(duì)定位元素有效

z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對(duì)象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對(duì)其設(shè)置的z-index會(huì)是無效的。

<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>

雖然第一個(gè)div的z-index比第二個(gè)div大，但是由于第一個(gè)div未定位，其z-index屬性未起作用，所以仍然會(huì)被第二個(gè)div覆蓋。

相同z-index誰上誰下

相同的z-index其實(shí)有兩種情況

1.如果兩個(gè)元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個(gè)都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序，后面的覆蓋前面的。

<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.如果兩個(gè)元素都沒有設(shè)置z-index，使用默認(rèn)值，一個(gè)定位一個(gè)沒有定位，那么定位元素覆蓋未定位元素

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

父子關(guān)系處理

如果父元素z-index有效，那么子元素?zé)o論是否設(shè)置z-index都和父元素一致，會(huì)在父元素上方

<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>

雖然子元素設(shè)置z-index比父元素小，但是子元素仍然出現(xiàn)在父元素上方

如果父元素z-index失效（未定位或者使用默認(rèn)值），那么定位子元素的z-index設(shè)置生效

<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生效，那么其子元素覆蓋關(guān)系有父元素決定

<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>

雖然第一個(gè)div的子元素的z-index比較高，但是由于其父元素z-index比第二個(gè)div低，所以第一個(gè)div子元素會(huì)被第二個(gè)div及其子元素覆蓋

應(yīng)用

經(jīng)常會(huì)有這樣一種錯(cuò)誤在table中最后各行一個(gè)td放一個(gè)div，點(diǎn)擊彈出子菜單做一些刪除、修改什么的操作，但是每次彈出的菜單都會(huì)被下面各行的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>

期望樣式

實(shí)際樣式

這時(shí)候習(xí)慣于增大options 的z-index卻發(fā)現(xiàn)于事無補(bǔ)，為什么呢？因?yàn)槊總€(gè)menu的z-index相同，它們的層疊順序按文檔流順序，無論子元素z-index調(diào)到多大，上面menu的options還是會(huì)被下面menu遮蓋。這時(shí)候我的做法一般是把options放到外面，所有的menu用一個(gè)，使menu與options沒有父子關(guān)系，或者干脆在點(diǎn)擊menu的時(shí)候把它的z-index調(diào)大，這樣其子元素就不會(huì)被遮蓋住了。