本篇內(nèi)容主要講解“css層級(jí)關(guān)系如何設(shè)置”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css層級(jí)關(guān)系如何設(shè)置”吧!

創(chuàng)新互聯(lián)從2013年成立，先為江油等服務(wù)建站，江油等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為江油企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在css中，可以利用z-index屬性來(lái)設(shè)置層級(jí)，該屬性可以設(shè)置元素的堆疊順序，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面；語(yǔ)法格式“z-index:數(shù)值;”，允許使用負(fù)值。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以利用z-index屬性來(lái)設(shè)置層級(jí)。

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。（Z-index 僅能在定位元素上奏效）。

做過(guò)頁(yè)面布局的同學(xué)對(duì)z-index屬性應(yīng)該是很熟悉了，z-index是針對(duì)網(wǎng)頁(yè)顯示中的一個(gè)特殊屬性。因?yàn)轱@示器是顯示的圖案是一個(gè)二維平面，擁有x軸和y軸來(lái)表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來(lái)表示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;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;"><div>

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

第二個(gè)div遮住了第一個(gè)div，對(duì)第二個(gè)添加z-index屬性

<div style="width:200px;height:200px;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><div>

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

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

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

<div style="width:200px;height:200px;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>

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

相同z-index誰(shuí)上誰(shuí)下

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

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

<div style="position:relative;width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>

2.如果兩個(gè)元素都沒(méi)有設(shè)置z-index，使用默認(rèn)值，一個(gè)定位一個(gè)沒(méi)有定位，那么定位元素覆蓋未定位元素

<div style="position:relative;top:50px;width:200px;height:200px;"></div>
<div style=" width:100px;height:100px;"><div>

父子關(guān)系處理

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

<div style="position:relative;width:200px;height:200px;z-index:10;">
        <div style="position:relative;width:100px;height:100px;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;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
</div>

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

兄弟之間子元素

如果兄弟元素的z-index生效，那么其子元素覆蓋關(guān)系有父元素決定

<div style="position:relative;width:100px;height:100px;z-index:5;">
        <div style="position:relative;width:50px;height:250px;z-index:50;"></div>
    </div>

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

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

到此，相信大家對(duì)“css層級(jí)關(guān)系如何設(shè)置”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前題目：css層級(jí)關(guān)系如何設(shè)置
文章源于：http://sd-ha.com/article2/gjjdoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)