詳解css中的z-index（一）-css教學-PHP中文網

詳解css中的z-index（一）

零下一度

發布： 2017-05-12 14:16:13

原創

1587 人瀏覽過

在我們常用的css中z-index 屬性是設定節點的堆疊順序, 這是我們對z-index 屬性普遍的認識. 同時, 我們總是對堆疊順序的概念模糊不清，這樣將會導致我們在平時的佈局中出現一些問題。下面我個人對css中z-index的一些個人的認識，希望能幫到大家，有說錯的地方希望大家指正。

css佈局中我們常常使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;

;以及定位中的absolute,relative,fixed;

#有的人誤認為定位和定位之間是本身就存在附帶堆疊順序的,在自己經過測試之後發現,他們的默認是沒有堆疊順序的,只是在html中標籤的前後順序導致的而使大家誤認為是定位和定位之間的堆疊順序而導致的。

下面是正常使用z-index程式碼範例：

定位中的static是標準流，所以這裡不做講解

當我們有三個盒子

div {
 width: 100px;
 height: 100px;
 color: white;
 float: left;
 }
.div1 {
 position: fixed;
 background-color: red;
 }
.div2 {
 background-color: blue;
 position: relative;
 }
.div3 {
 background-color: green;
 position: absolute;
 }
 </style>
</
head
>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>

登入後複製

我們給他們分別設定fixed，relative，absolute；背景色為紅色，藍色，綠色

我們會發現absolute的綠色盒子會在最上面，在html程式碼中改變標籤的位置順序則可以讓盒子出現在堆疊層的最上面，當然如果我們要想在不改變

html標籤

的順序，那麼我們就可以使用第二種方法z-index：

在我們加入z-index是要注意這個樣式是有值的；值也可以影響我們的堆疊順序。

樣式內z-index的值越大的堆疊層越高，當然我們也要注意z-index也並不是什麼時候都管用的。

只有在同一樣式時，例如定位與定位之間的堆疊，

浮動

與浮動之間的堆疊，如果有兩個盒子，一個盒子為浮動元素一個盒子為定位元素，兩個盒子發生堆疊，此時我們想要浮動的盒子顯示在定位盒子之上，我們是沒有辦法的，設置z-index這個時候是沒有用的。

定位的盒子本身堆疊的順序就要比浮動的盒子的堆疊順序要高，所以此時我們要解決這個問題就需要把浮動盒子換成定位的盒子，設置之後我們就可以z -index來設定堆疊順序了。

上面是本人的一點個人觀點，希望可以幫到大家，後續自己也會寫一些關於web中一些個人認識。有不同觀點大家可以隨意發表。