<!DOCTYPE html><html><head><meta charset="utf-8" /><title>p重疊 疊加執行個體 未排層疊順序 www.jb51.net</title><style>.p-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} .p-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px} /* css注釋說明： 背景為紅色 */ .p-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} /* 背景為黃色 */ .p-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px} /* p背景顏色為藍色 */ </style></head><body><p class="p-relative"><p class="p-a">我背景為紅色</p><p class="p-b">我背景為黃色</p><p class="p-c">我背景為藍色</p></p></body></html>2、未排p層疊順序 p+css執行個體
執行個體說明：
我們使用position實現絕對位置，對父級設定position:relative屬性，對其子級設定position:absolute加上left或right和top或bottom實現子級在父級內任意定位。在原始情況下重疊是按p代碼本身順序排列，越後輸入的p盒子其越靠前（浮在上面）。除了改變原始碼本身p代碼在html順序，我們還可以使用css z-index實現p層排列順序。
二、通過CSS控制p重疊順序
我們使用以上絕對位置執行個體代碼，只需要對“.p-a”、“.p-b”、“.p-c”分別加入z-index樣式即可實現任意順序排列。
擴充知識：
z-index的值為正整數值，數字越大對應對象層越浮上層（越靠前。
以上執行個體預設順序是“.p-c”浮在最上層（藍色背景層）、“.p-b”浮在中層（黃色背景層）、“.p-a”排最底層（紅色背景層）。我們接下來使用z-index樣式在不改變html代碼情況下實現順序顛覆，“.p-b”浮在中層（黃色背景層）排序不變，實現“.p-a”浮在最上層（紅色背景層）、“.p-c”排最底層（藍色背景層）。
1、實現按意願排列p層疊重疊順序完整HTML代碼：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>p重疊 疊加執行個體 排層疊順序 www.jb51.net</title><style>.p-relative{position:relative;color:#000;border:1px solid #000;width:500px;height:400px} .p-a{ position:absolute;left:30px;top:30px;z-index:100;background:#F00;width:200px;height:100px} /* p背景色為紅色 */ .p-b{ position:absolute;left:50px;top:60px;z-index:80;background:#FF0;width:400px;height:200px} /* 背景為黃色 */ .p-c{ position:absolute;left:80px;top:80px;z-index:70;background:#00F;width:300px;height:300px} /* 背景為藍色 */ </style></head><body><p class="p-relative"><p class="p-a">我背景為紅色</p><p class="p-b">我背景為黃色</p><p class="p-c">我背景為藍色</p></p></body></html>
2、p層疊順序執行個體
實現紅背景的“p-a”與藍色背景“p-c”層疊順序替換執行個體
我們在不改變第一個執行個體的HTML代碼下，對“p-a”、“p-b”、“p-c”絕對位置實施後加入z-index實現層疊順序改變。
三、p重疊總結
要實現p重疊，並改變實現p盒子層疊重疊順序，我們對父級使用position:relative,對子級使用position:absolute、z-index（重疊順序）、left，right，top，bottom絕對位置相當於父級具體位置。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
