當導航欄設置爲位置時，導航欄中的下拉菜單無法正常工作：固定;

我設計了一個帶有四個選項的導航欄，然後在其中一個選項懸停時出現下拉菜單。當導航欄未設置到位置時，下拉菜單正常工作：固定;但是當它是時，下拉菜單涵蓋激活它的選項/鏈接。當導航欄設置爲位置時，導航欄中的下拉菜單無法正常工作：固定;

在這裏，我已發現，一個的jsfiddle：https://jsfiddle.net/rqhenq4a/

我已經實現用下面的代碼行固定導航欄：

body { 
padding-top:49px 
}

（爲了避免導航欄重疊底層內容，導航bar正好有一個正好爲49px的高度）

ul { 
position:fixed; 
width:100%; 
top:0; 
z-index:1; 
}

使導航欄固定的第一行代碼，第二行一行代碼使導航欄覆蓋整個視口，第三行代碼讓它始終位於視口之上（我認爲），以及避免導航欄繼承不透明度的最後一行代碼一個潛在的形象。

想要的結果將是一個固定的導航欄，其中「Produkter」選項不會被下拉菜單的選項所覆蓋。

來源

2017-09-08 Max Svenman

它看起來像你在下拉菜單中也有'position：fixed'。這將強制元素到頁面的頂部，遮擋導航欄。 – Tijmen

這是你在找什麼jsfiddle.net

ul li ul#dropdowncontent { 
    min-width: 100%; 
    display: none; 
    position: absolute; 
    z-index: 999; 
    left: 0; 
    width: 90px; 
    top: 100%; 
}

只需加頂：100％;

來源

2017-09-08 18:54:23

非常感謝。出於好奇，頂級玩家究竟是什麼：100％;意思？ –

我更新了小提琴，我添加了頂部：100％，這意味着它需要孩子100％的父母的頂部。 –

你只是錯過了頂部的偏移量。通過設置位置，絕對的，你有默認頂偏0 這是你編輯的代碼，解決方法是在第46行

https://jsfiddle.net/rqhenq4a/3/

代碼示例：

ul li ul#dropdowncontent { 
min-width:100%; 
display:none; 
position:absolute; 
z-index:999; 
left:0; 
top:49px;  /*This line here <---------- */ 
width:90px; 
}

來源

2017-09-08 19:10:08

好吧，我正試圖圍繞這個包裹我的頭。當你顯示一個元素爲絕對值時，這意味着它將顯示在頁面的頂部/父元素的頂部，因爲它沒有默認的邊距？感謝您的幫助！ –

這並不完全正確，你可以將絕對元素的父母固定在地板上，並且其中的絕對元素也會下降，但是他的絕對位置將位於固定元素的頂部。你想在這個例子中推出絕對元素固定.. –

這裏有一些關於定位在CSS中的來源。 https://css-tricks.com/almanac/properties/p/position/ https://www.w3schools.com/css/css_positioning.asp –

當導航欄設置爲位置時，導航欄中的下拉菜單無法正常工作：固定;

回答

相關問題