css如何設置元素層次

小編給大家分享一下css如何設置元素層次，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在css中，可以使用z-index屬性設置元素層次，只需要給指定元素設置“z-index:auto|數值;”樣式即可；z-index屬性可以指定一個元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用z-index屬性設置元素層次。

z-index 屬性指定一個元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

元素層疊級別是相對于元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。為了更清晰的描述Z-index是如何工作的，這張圖片夸大展示了層疊元素在視覺位置上的關系。

自然層疊順序demo

為了更好的表現出最基本的層疊，看下面的demo，地址 http://jsbin.com/yezisino/1/edit

html代碼：

<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>

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

效果圖：

驗證z-index

為了驗證z-index的作用，對上述代碼進行修改，實例如下

分別把blue green  red的z-index設置為999   99   9，但是看上去好像和之前沒什么變化，原因是因為Z-index只能工作在被明確定義了absolute，fixed或relative 這三個定位屬性的元素中。so 我們繼續對css做一些修改：

如圖所示，顯示的順序已經按照我們設置的z-index大小展現了

多個父元素中子元素的z-index設置

在原基礎之上，我們對html和css做一些改動，驗證一下父元素不同的情況下 ，子元素設置不同的z-index顯示效果

可以很明顯的看出，不同父元素的子元素之間進行顯示時，會根據父級元素的z-index進行渲染.

css的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

以上是“css如何設置元素層次”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！