css z-index 層疊順序體驗

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這是什嗎？

Z-index屬性決定了一個HTML元素的層疊層級。元素層疊層級是相對於元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。

為了更清晰的描述Z-index是如何工作的，上面的這張圖片誇大展示了層疊元素在視覺位置上的關係。

自然的層疊順序

在一個HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個列表，它展示的清單項目是處於一個層疊環境（stacking context，暫時未找到合適的漢語翻譯，應該是指層疊的元素所處的那個層疊的環境）中，這些項是處於這個層疊環境的底部的。這個列表中的項都沒有被賦予Z-index屬性。

元素的背景和邊框會建立一個stacking context

引用:
·具有負值的stacking contexts元素，按照出現的先後順序排列（越靠後層級越靠上）
·沒有被定位，沒有浮動的區塊層級元素，按照出現的先後順序排列
·沒有被定位，浮動的元素，按照出現的先後順序排列
·內嵌元素，按照出現的先後順序排列排列
·被定位的元素，按照出現的先後順序排列

Z-index 屬性，當被正確使用的時候，會改變自然的層疊順序。

當然，除非元素已經被定位按照互相交疊的形式展現，否則元素的層疊順序並不會特別的明顯。下面的，負邊距的BOX被拿來展示，用以說明自然的層疊順序。

《全透視:CSS Z-index 屬性》藍色理想：http://www.blueidea.com/tech/web/2009/7060.asp

z-index是個神奇的屬性，因此在前端中許多效果都會涉及它。

它是個什麼東西呢，試玩一下吧。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Tomi-Eric" />
<meta name="Description" content="Tomi-Eric,練習執行個體" />
<meta name="author" content="Tomi-Eric" />
<meta name="copyright" content="Tomi-Eric,練習執行個體" />
<title>簡單的XHTML頁面</title>
<style type="text/css">
#main{position:relative}
#layer-1,#layer-2,#layer-3,#layer-4,#layer-5{position:absolute;width:500px;height:300px}
#layer-1{top:10px;left:10px;background:#ccc}
#layer-2{top:30px;left:50px;background:#f00}
#layer-3{top:50px;left:100px;background:#ff0}
#layer-4{top:100px;left:150px;background:#f90}
#layer-5{top:150px;left:200px;background:#999}
</style>
<script type="text/javascript">
function reset(){
      var select_id="layer-"+$("select_id").value;
   $(select_id).style.zIndex+=10;
   var div=$("main").getElementsByTagName("div");
   showZindex("layer-",div);
}
function $(id){
     if(typeof(id)=="string"){
       return document.getElementById(id);
}
}
function showZindex(id,div){
    for(var i=0;i<=div.length-1;i++){
      alert(id+(i+1)+":"+div[i].style.zIndex);
}
}
</script>
</head>
<body>
<select name="select_id" id="select_id">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="調整" onclick="reset()">
<div id="main">
    <div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>
<div id="layer-5">layer-5</div>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More