依照規範，z-index是應用在定位元素的，也就是position屬性不為relative的元素，否則，設定z-index是沒有意義的；
z-index的作用有兩點，一是設定在目前堆疊上下文(stacking context)中的層級；二是創建一個新的堆疊上下文；
z-index並不是設定的值越高，就會越靠近用戶，還和堆疊上下文有關係；

1. 在同一個堆疊上下文中的元素，z-index越高越靠近使用者；

2. 在不同堆疊上下文中的元素，如果堆疊上下文一距離用戶更近，那麼它的所有子元素都在另一個堆疊上下文子元素的前面，也就是離用戶更近，不同堆疊上下文中的子元素不可能發生交叉；

3. 所以，z-index其實不是絕對值，而是相對值；

舉例如下：

body { margin: 0; } .p1 { width: 700px; height: 700px; background: red; } .p1p1 { width: 300px; height: 300px; background: green; position: absolute; top: 0px; left: 0px; z-index: 500; } .p1p1p1 { width: 200px; height: 200px; background: yellow; position: absolute; z-index: 10; } .p2 { width: 600px; height: 600px; background: pink; position: absolute; z-index: 400; top: 0; } .p2p1 { width: 500px; height: 500px; background: blueviolet; position: absolute; z-index: 800; }

對於.p1p1p1和.p2p1，雖然後者的z-index(800)高於前者(10)，但是因為前者所在的堆疊上下文(.p1p1)的z-index(500)高於後者所在的堆疊上下文(.p2p1)的z-index(400)，所以前者是在後者上面的。

評論裡面你設定p{z-index:9;position:relative;}會建立一個新的堆疊上下文，和p同級的元素是0，img元素是9 -1，因為9 >0，所以img是在上面的。

依照你的題目，其實position屬性是不能改的，如果把position屬性改為relative，那你的z-index屬性其實就不起作用了，在z-index都起作用的情況下，是沒有辦法達到你的要求的，理由如下：

A 888 H 888 1000 B 999

A, B和H的層級如上，因為888

不能。因為你的H和B都是position: absolute，可以認為，絕對定位的元素在z軸上的偏移量遠大於z-index可以設定的量（可以認為絕對定位元素有著無窮大的z偏移）。因此，H和B兩個元素的z-index其實並沒有起到任何作用。

去掉了position: absolute之後，程式碼如下

 
 This is a heading 
 
 

效果：

首先A,B,H都是絕對定位，然後z-index,B>A了，自然而然，B就擋住了A，H在A裡面，又是絕對定位於A，自然也就擋住H了，解決方法就是設定z-index,A>B就行了。這樣佈局，H的z-index，沒有實在的意義(只要遮住了A，也就遮住了H)！除非H不在A裡面！

可以想像成每一個元素的z-index都聲明了一個平面世界，平面世界的高度就是z-index的值。 而子元素的z-index都是在這個世界相比較。

如果外面的z-index前者小於後者，沒有辦法讓前者的子節點超過後者，只能改變層級，不過這樣子的話，前者就可能把後者全都檔住了，所以樓主還是把H從A中拿出來對應的層級設定好就能達到效果了

不能父級限制了子元素的 位置