基礎的z-index是看值大小來排列前後，但如果是下列狀況:
但假定我有一個結構是如此:
html
<div class="parent">
<div class="child">
<div/>
</div>
<div class="parent">
<div class="child">
<div/>
</div>
css
.parent{
position:relative;
z-index:1;
}
.child{
position:absolute;
z-index:2;
}
.child:hover{
width:600px; //假設很大
height:600px; //假設很大
}
當兩個相鄰元素，當滑鼠放到child，child放大，第一個child希望能蓋在第二個parent之上，這樣設定child的z-index應該是不行的，他會看parent父元素的排列，當它們同一階層時就又相同class就有點尷尬了
不希望是改成parent1,parent2...再改z-index去解，也會衍伸其他問題。
已邀請的邦友 {{ invite_list.length }}/5
https://jsbin.com/kixuqiyoge/1/edit?html,output
這樣？
你的CSS註解，讓我debug了好久，想說css應該沒錯，但是怎麼沒用...
你原本css發生的狀況：
1.position:absolute;本來就會定位於父階層position:relative;元素的上方，所以不用特地加z-index。
2.然後父階層如果不指定高度，因為子階層是浮在父階層上方，所以瀏覽器會把父階層當成沒有內容，所以高度為0。
3.然後兩個子階層就會疊在一起，2會蓋過1。
所以該做的作法，就是在hover後，才把position改成absolute，然後指定個比較大的z-index讓他在上面。
然後我個人覺得這樣的UI設計不流暢，或許你可以參考這篇。
https://ithelp.ithome.com.tw/questions/10190681
大大不行啊，parent和child本身要先自帶z-index，環境上還有其他物件，不能預設它們是沒有z-index的情況下
恩我目前是有hover後改一些東西，但要搭配js，想知道css有沒辦法獨力完成
parent帶的話其實沒關係，裡面的child只要不設absolute，就會在parent那層，但是child你如果一定要讓他先absolute的話，就會踩到2，然後就會很尷尬了。
我寫的效果應該是你想要的吧？
大大那樣是可以，但我想改的狀態比較尷尬是
.parent{
position:relative;
z-index:1;
}
.child{
position:absolute;
z-index:2;
}
這樣的狀況下去新增條件，不能拿掉parent跟child的z-index，所以即使是hover上去後，會連動，兩個父層都是同階層，child蓋不住其他的parent
就說你parent這樣會沒高度，所以parent會疊在一起，然後被child蓋住啊。
並不是你child沒辦法覆蓋parent，而是child被後面的child覆蓋。
要不然就是強制parent有寬高，然後再擴大，雖然我不太喜歡這種作法。
這種作法parent無法自動算內容高度。
看樣子你的需求應該是摸到子層之後要變成像是lightbox蓋住整個畫面的效果吧，
這樣你的父層就不要設定position就好了
或者子層設定 fixed 也可以。
不知道有沒有解決你的問題。
感謝大大，不是要lightbox，因為是迴圈結構，鄰近相鄰的父層都是同個class，子層被滑動時會顯示出來一個區塊，但太大時會被旁邊的父層蓋住，後來還是靠JS輔助去寫了。父層不寫position，就變成那lightbox，子層會變層全域，我只是要作用在那個區塊附近
iThome鐵人賽
看影片追技術