小編給大家分享一下css如何設(shè)置元素層次，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。
在css中，可以使用z-index屬性設(shè)置元素層次，只需要給指定元素設(shè)置“z-index:auto|數(shù)值;”樣式即可；z-index屬性可以指定一個(gè)元素的堆疊順序，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用z-index屬性設(shè)置元素層次。
z-index 屬性指定一個(gè)元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
元素層疊級(jí)別是相對(duì)于元素在Z軸上（與X軸Y軸相對(duì)照）的位置而言。一個(gè)更高的Z-index值意味著這個(gè)元素在疊層順序中會(huì)更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)。為了更清晰的描述Z-index是如何工作的，這張圖片夸大展示了層疊元素在視覺(jué)位置上的關(guān)系。
自然層疊順序demo
為了更好的表現(xiàn)出最基本的層疊，看下面的demo，地址 http://jsbin.com/yezisino/1/edit
html代碼：
css：
重慶分公司
重慶分公司
.blue,.green,.red{
width:200px;
height:200px;
}
.blue{
background:blue;
}
.green{
background:green;
margin-top:-100px;
margin-left:50px;
}
.red{
background:red;
margin-top:-100px;
margin-left:100px;
}效果圖：
驗(yàn)證z-index
為了驗(yàn)證z-index的作用，對(duì)上述代碼進(jìn)行修改，實(shí)例如下
分別把blue green red的z-index設(shè)置為999 99 9，但是看上去好像和之前沒(méi)什么變化，原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative 這三個(gè)定位屬性的元素中。so 我們繼續(xù)對(duì)css做一些修改：
如圖所示，顯示的順序已經(jīng)按照我們?cè)O(shè)置的z-index大小展現(xiàn)了
多個(gè)父元素中子元素的z-index設(shè)置
在原基礎(chǔ)之上，我們對(duì)html和css做一些改動(dòng)，驗(yàn)證一下父元素不同的情況下 ，子元素設(shè)置不同的z-index顯示效果
可以很明顯的看出，不同父元素的子元素之間進(jìn)行顯示時(shí)，會(huì)根據(jù)父級(jí)元素的z-index進(jìn)行渲染.
css的基本語(yǔ)法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號(hào)分隔開(kāi)。
以上是“css如何設(shè)置元素層次”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
