CSS z-index 屬性

admin發表於2018-12-23
CSSIndex

z-index屬性用於設定position定位元素的層疊順序。

如果元素僅位於x軸與z軸構成的二維平面空間，那就不存在層疊關係。

於是，此屬性用於設定元素在z軸方位的層疊順序，這也是z-index名稱的由來。

z-index 屬性對採用如下定位的元素有效：

（1）.position:absolute絕對定位，參閱CSS position:absolute 絕對定位一章節。

（2）.position:relative相對定位，參閱CSS position:relative 相對定位一章節。

（3）.position:fixed固定定位，參閱CSS position:fixed 固定定位一章節。

（4）.position:sticky粘性定位，參閱CSS position:sticky 粘性定位一章節。

本文將通過程式碼例項詳細演示z-index屬性定位原理，並給出總結。

語法結構：

[CSS] 純文字檢視 複製程式碼
z-index: auto|<integer>|inherit

引數解析:

（1）.auto：預設，規定定位元素的層疊順序與父元素相同。

（2）.number：設定層疊元素的層疊順序，可以是負數，值越大層疊順序越高。

（3）.inherit：規定繼承父級元素的z-index值。

特別說明：此屬性對瀏覽器自帶的視窗控制元件無效（即便採用定位），例如select下拉選單。

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.Opera瀏覽器支援此屬性。

（5）.Safari瀏覽器支援此屬性。

（6）.火狐瀏覽器支援此屬性。

一.非定位元素（包括position:static元素）的層疊順序關係：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a{
  float:left;
  width:100px;
  line-height:100px;
  color:black;
  text-align:center;
  text-decoration:none;
}
.ant-1{background-color:red;}
.ant-2{background-color:blue;}
.ant-3{background-color:green;}
a:hover{
  width:140px;
  margin-left:-40px;
}
</style>
</head>
<body>
<div> 
  <a href="#" class="ant-1">螞蟻部落</a> 
  <a href="#" class="ant-2">螞蟻部落</a> 
  <a href="#" class="ant-3">螞蟻部落</a> 
</div>
</body>
</html>

程式碼分析如下：

（1）.三個連結都沒有采用定位。

（2）.當滑鼠懸浮的時候，後面的元素會覆蓋在前面元素之上。

（3）.說明非定位元素的層疊順序是由它們在文件流中的先後順序決定，後面的比前面的大。

二.定位元素與非定位元素的層疊關係：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{margin:50px;}
#box div{
  width:100px;
  height:100px;
}
.a{
  position:relative;
  right:20px;
  top:20px;
  background-color:red;
}
.b{background-color:green;}
.c{
  position:relative;
  right:20px;
  top:-20px;
  background-color:blue;
  z-index:-1;
}
</style>
</head>
<body>
<div id="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/23/164754m4fzu8h7u30c8nrn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（1）.紅色div採用相對定位，層疊順序高於非定位元素。

（2）.藍色div採用相對定位，但是z-index值為負數，層疊順序低於非定位元素。

定位元素的層疊順序高於非定位元素，z-index屬性值為負數的定位元素層疊順序低於非定位元素。

三.定位元素之間的層疊順序：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
}
.a{
  position:relative;
  right:20px;
  top:20px;
  background-color:red;
  z-index:1;
}
.b{
  background-color:green;
  position:relative;
  z-index:2;
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/23/164824yemeftmemzy0ylf3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（1）.兩個元素都採用定位。

（2）.綠色div的z-index屬性值大於紅色div的z-index屬性值。

（3）.所以綠色會覆蓋在紅色之上，也就是誰的z-index值大，誰的層疊順序就高。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{padding:20px;}
div{
  width:100px;
  height:100px;
}
.a{
  position:relative;
  left:80px;
  top:180px;
  background-color:red;
  z-index:1;
}
.b{
  background-color:green;
  position:relative;
  z-index:1;
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/23/164849mkls7flxu1572kd7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.兩個定位元素的z-index屬性值相同。

（2）.但是綠色的層疊順序要高於紅色div。

（3）.這是因為當定位元素的z-index屬性值相同時，文件程式碼中後面的元素層疊順序更高。

特別說明：是文件程式碼的中的順序，而不是渲染後的展現順序。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{padding:20px;}
div{
  width:200px;
  height:200px;
}
.a{
  position:relative;
  right:20px;
  top:20px;
  background-color:red;
  z-index:1;
}
.b{
  background-color:green;
  position:relative;
  z-index:2;
}
.a .a-1{
  background-color:yellow;
  width:100px;
  height:100px;
  position:relative;
  top:100px;
  left:50px;
  z-index:100;
}
.b .b-1{
  background-color:black;
  width:100px;
  height:100px;
  position:relative;
  top:-20px;
  z-index:1;
}
</style>
</head>
<body>
<div class="a">
  <div class="a-1"></div>
</div>
<div class="b">
  <div class="b-1"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/23/164920ze11iz56p5ebbi5v.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.b元素的層級高於a元素層級。

（2）.那麼b的子元素無論怎樣層疊順序都會高於a的子元素的層疊順序。

（3）.這也從側面說明一個問題，平臺是很重要的，願大家都有一個較高層次的平臺。

四.最後總結：

（1）.非定位元素，層疊順序由它們在文件中的先後順序決定，後面大於前面。

（2）.同級定位元素，z-index值大的層疊順序高於值小的。

（3）.同級定位元素，z-index相同，由它們在文件中的順序決定，後面大於前面。

（4）.父定位元素層級高，那麼子元素的層級也要高。

關於元素層疊更多知識可以參閱CSS 層疊順序一章節。

相關文章