iT邦幫忙

0

[css] z-index 同階層子層堆疊問題

基礎的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去解,也會衍伸其他問題。

froce iT邦高手 1 級 ‧ 2018-09-10 23:20:30 檢舉
看不太懂,你這樣的話第2個child會蓋過第1個child,但是第一個的確是蓋過第2個parent啊。
Zaku iT邦新手 4 級 ‧ 2018-09-11 09:52:38 檢舉
抱歉那我改一下。改好了,child被滑到才放大

1 個回答

0
froce
iT邦高手 1 級 ‧ 2018-09-11 10:43:09

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

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2018-09-11 13:29:02 檢舉

大大不行啊,parent和child本身要先自帶z-index,環境上還有其他物件,不能預設它們是沒有z-index的情況下

Zaku iT邦新手 4 級 ‧ 2018-09-11 13:30:34 檢舉

恩我目前是有hover後改一些東西,但要搭配js,想知道css有沒辦法獨力完成

froce iT邦高手 1 級 ‧ 2018-09-11 15:32:36 檢舉

parent帶的話其實沒關係,裡面的child只要不設absolute,就會在parent那層,但是child你如果一定要讓他先absolute的話,就會踩到2,然後就會很尷尬了。

我寫的效果應該是你想要的吧?

Zaku iT邦新手 4 級 ‧ 2018-09-11 16:06:21 檢舉

大大那樣是可以,但我想改的狀態比較尷尬是

.parent{
    position:relative;
    z-index:1;
}
.child{
    position:absolute;
    z-index:2;
}

這樣的狀況下去新增條件,不能拿掉parent跟child的z-index,所以即使是hover上去後,會連動,兩個父層都是同階層,child蓋不住其他的parent

froce iT邦高手 1 級 ‧ 2018-09-11 16:23:50 檢舉

就說你parent這樣會沒高度,所以parent會疊在一起,然後被child蓋住啊。
並不是你child沒辦法覆蓋parent,而是child被後面的child覆蓋。

要不然就是強制parent有寬高,然後再擴大,雖然我不太喜歡這種作法。
這種作法parent無法自動算內容高度。

我要發表回答

立即登入回答