我該怎麼做才能讓一個絕對的孩子落後於一個固定的父母？

我有一個固定的標題，顯示一個孩子點擊一個按鈕時。我把它放在jsfiddle上，使它更簡單，但如果你這樣做，你可以看到孩子在父母之上。有什麼我可以做的，讓它顯示在後面呢？我該怎麼做才能讓一個絕對的孩子落後於一個固定的父母？

另外，我需要家長有一個z-indexFiddle

#parent { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 9; 
 
} 
 
#child { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: #000; 
 
    position: absolute; 
 
    top: -200px; 
 
    left: 0; 
 
    z-index: -1; 
 
    transition: 0.2s; 
 
} 
 
#parent:hover #child { 
 
    top: 50px; 
 
}

<div id="parent">Hover me 
 
    <div id="child"> 
 
    </div> 
 
</div>

來源

2016-10-03 Pa3k.m

你的代碼添加到這個問題 - 這將有助於誰可能有類似的/相同的問題等，因此用戶。 –

@alexwc_我想我已經在標題上清楚地說明了問題。 –

是的，你有 - 但看到你已經嘗試真正有幫助。有一個小提琴是好的，但有這個網站上的代碼，確保它不會消失（除非你刪除它或被投票刪除）。 –

你需要具備的要素周圍的包裝，所以你可以用z-index的發揮。見下面或view this JSFiddle。

#parent { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#child { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: #000; 
 
    position: absolute; 
 
    top: -200px; 
 
    left: 0; 
 
    z-index: -1; 
 
    transition: 0.2s; 
 
} 
 

 
#parent:hover #child { 
 
    top: 50px; 
 
} 
 

 
.wrapper { 
 
    z-index:0; 
 
    position:fixed; 
 
    width:100%; 
 
    top:0; 
 
}

<div class="wrapper"> 
 
    <div id="parent">Hover me 
 
    <div id="child"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-10-03 16:43:00

工程很棒。謝謝！ –

@ Pa3k.m不客氣！ –

我已經經歷了類似的問題，並通過改變一些HTML結構和CSS的解決。我希望它能幫助你。

在這裏，我做了一些更新，根據您的例子

#parent { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #f00; 
 
    
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 9; 
 
} 
 

 
#child { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: #000; 
 
    
 
    position: absolute; 
 
    top: -200px; 
 
    left: 0; 
 
    z-index: 8; 
 
    
 
    transition: 0.2s; 
 
} 
 

 
#parent:hover ~ #child { 
 
    top: 50px; 
 
}

<div id="parent">Hover me</div> 
 
<div id="child"></div>

來源

2016-10-03 16:53:10

我該怎麼做才能讓一個絕對的孩子落後於一個固定的父母？

回答

相關問題