Opacity屬性和下拉菜單

-1

<body> 
 
    <div id="header"></div> 
 

 
    <div id="mainArea"> 
 
    <div class="container page"> 
 
     /* Paragraph here */ 
 
    </div> 
 
    </div> 
 
</body>

我無意對「頭」一個下拉菜單，並具有設計，因爲這 [的頁面。

但之後，當我將「mainArea」的不透明度更改爲0.8時，原來是[。

mainArea現在位於header導航欄的頂部。我試圖改變它的z-index，但沒有任何改變。

更新：

我已經讀到了堆疊內容，你可以在MDN The stacking context閱讀更多細節。

我誤解的唯一的事情就是我認爲z-index是被遺傳的，但事實證明它並不是。儘管如此，當我嘗試將它應用於定位元素的子元素時，它就起作用了。

希望這會幫助有人有同樣的問題。其他人的推薦鏈接對我來說也非常有用。

來源

2016-07-03 elPsyChris

我的問題終於通過在背景色中使用rgba（）而不是使用不透明來解決。在我的情況下，更改元素的不透明屬性似乎會在堆疊順序中產生變化。 – elPsyChris

我以前有同樣的問題。我不知道實際的原因，但在包含菜單的div上定義不透明屬性時，z-index不起作用。

刪除不透明度和嘗試的z-index，不知道

來源

2016-07-03 10:26:23

是的，謝謝！我嘗試過，但似乎沒有在我的情況下工作 – elPsyChris

這可能會幫助你。 http://stackoverflow.com/questions/7490146/z-index-relative-or-absolute –

感謝您的幫助 – elPsyChris

您需要添加margin-top到MAINAREA。

.mainArea{ 
    margin-top:10px; // choose whatever value suits you. 
}

另外，刪除z-index和不透明度，因爲它們與問題無關。

來源

2016-07-03 10:26:50

它的工作，但後來，我想知道是否有任何解決方案讓導航欄後面的「mainArea」或者不是，因爲它似乎在我的導航欄上，所以我不能將鼠標懸停在它後面的元素上。 – elPsyChris

只需增加邊距頂部的值，它就會下降。你爲什麼要把它放在後面？ –

因爲我想要的設計就像上面的第一張圖片，我改變了不透明屬性以便能夠看到背景，但它覆蓋了下拉菜單並導致我出現問題。 – elPsyChris

Opacity屬性和下拉菜單

回答

相關問題