CSS中定位元素的重疊

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

上載者：User

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

如果在一個頁面中同時使用幾個定位元素，就可能發生定位元素重疊的情況，預設的情況下，後添加的元素會覆蓋先添加

的元素，通過使用層疊定位屬性(z-index)，可以調整各個元素的顯示順序。

1. 層疊定位屬性z-index

用來定義定位元素的顯示順序，在層疊定位屬性中，屬性值使用auto值和沒有單位的數字，如：z-index: auto | number

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> CSS屬性 </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>    .index1 {  top: 50px;  left: 50px;  background: #333333;  z-index: 2;}.index2{  top: 100px;  left: 100px;  background: #666666;  z-index: -1;}.index3{ top: 150px; left: 150px; background: #999999; z-index: 1;}div {  position: absolute;  width: 200px;  height: 150px;}  </style> </head> <body>  <div class="index1"></div>  <div class="index2"></div>  <div class="index3"></div> </body></html>

從上圖可以看出，通過定義層疊定位屬性可以隨意更改元素的顯示順序。如果取消層疊定位屬性的話，效果圖如下所示：

2. 簡單嵌套元素中的層疊定位

在嵌套元素中，如果父元素和子項目中都使用了定位屬性，則無論父元素中層疊定位屬性定義何值，子項目均會覆蓋父元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> CSS屬性值 </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>    .main {  position: absolute;  width: 400px;  height: 200px;  background: #999999;  z-index: -1;}.include { position: absolute; width: 200px; height: 100px; background: #333333; z-index: -1;}  </style> </head> <body>  <div class="main">    <div class="include"></div>  </div> </body></html>

以上的代碼中，在父元素中定義層疊定位屬性值為1，子項目中定義層疊定位屬性值為-1，同時定義兩個元素的定位屬性均為絕對位置，雖然在父元素中

定義的層疊定位屬性值大於子項目中定義的層疊定位屬性值，但是子項目依然會覆蓋父元素。

2. 包含子項目的複雜層疊定位

在使用包含層疊定位屬性的元素時，有時候在元素中會包含子項目，則子項目的顯示效果不能超過父元素中定義的層疊順序。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>    .sun {  position: absolute;  width: 150px;  height: 100px;  background: #000000;  z-index: 10;}.index1 { top: 50px; left: 50px; background: #333333; z-index: 2;}    .index2 { position: relative; top: 100px; left: 100px; background: #666666; z-index: -1;}.index3 { top: 150px; left: 150px; background: #999999; z-index: 1;}div {  position: absolute;  width: 200px;  height: 150px;}  </style> </head> <body>  <div class="index1"></div>  <div class="index2"></div>  <div class="index3">    <div class="sun"></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