兒童家長VS Z-指數問題

我看了幾個相關的問題，但我cannt找到一個解決方案。我甚至試圖在本文中使用該解決方案，但它對我沒有任何作用。 >https://philipwalton.com/articles/what-no-one-told-you-about-z-index/兒童家長VS Z-指數問題

我需要的「懸停」要在「底部」分區。請注意，我無法更改元素的聲明位置。

有沒有解決方案？

我的代碼：

.top { 
 
    position: fixed; 
 
    z-index: 1; 
 
} 
 

 
.hover { 
 
    position: absolute; 
 
    z-index: 999; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    z-index: 1; 
 
}

<div class="top">top 
 
    <div class="hover">HOVER</div> 
 
</div> 
 
<div class="bottom">bottom<div>

來源

2017-07-06 DMR

總之，你不能：'.top'曾經分配'位置的**新的堆疊內容**創建：fixed'，所以它的任何孩子都不會成爲其兄弟姐妹的頂部，無論您使用的z-index有多高。瞭解更多關於堆疊內容：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context – Terry

我不知道你的最終目標是什麼......這是你想要的去做？ https://codepen.io/anon/pen/gRdYYy –

嗨@MichaelCoker ..我需要「自下而上」結束了「頂」 ..但「盤旋」在「底部」 ......自從「哈弗」是其子必須成爲所有元素.. – DMR

你不能。子元素只能在父母區域內改變。如果您嘗試更改childs css並且它適合父級，則父級css將覆蓋它。

你可以嘗試使用JS移動孩子的父母DIV之外。我會建議在jquery中使用.append（）。

來源

2017-07-06 21:07:59

兒童家長VS Z-指數問題

回答

相關問題