CSS中定位元素的重疊
阿新 • • 發佈：2019-01-10
如果在一個頁面中同時使用幾個定位元素，就可能發生定位元素重疊的情況，預設的情況下，後新增的元素會覆蓋先新增
的元素，通過使用層疊定位屬性(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>
從上圖可以看出，雖然在子元素中定義很大的層疊定位屬性值，但是子元素的顯示順序依然要受到父元素的影響。