如果元素定位已受容器 div 影響，如何在 CSS 中創建下拉菜單？

Question

這是CSS：

 #header { position: fixed; top: 0; width: 100%; display: block; height: 40px; background-color: blue; } #header h3 { text-align: left; vertical-align: middle; } #header a { text-align: right; vertical-align: middle; margin: 10px 20px 0 0; }

 <div id="header"> <h3>Company name</h3> <a href="#">Options</a> </div>

有了上面，標題就位，公司名稱就位（在標題的左側），選項在標題的最右側。

我現在的問題是，如果我創建一個下拉菜單，我將不得不包裝 (?) Options 或將它放在另一個具有position: relative <div></div> ，因為下拉菜單需要是position: absolute 。 但是當我嘗試這樣做時，整個事情就搞砸了。 選項不再在右側，而是在左側。 我曾嘗試查看教程，但大多數都是基本的下拉教程或基本的定位教程。

誰能幫我正確定位這些元素？ 或者至少指出我正確的方向。 任何幫助將不勝感激。

Answer 1

您可以將標題 id div 包裝到另一個 div 中，將position:fixed property-value pair (pvp) 賦予該包裝 div。 然后，在您的標題上使用position:relative ，在您的選項錨上使用position:relative position:absolute ，並根據需要使用top 、 right 、 bottom和left css 屬性定位選項錨。 一個小小的速成班：

position:absolute告訴元素 X 將它放置在其具有position:relative pvp 的第一個父元素的頂部（向上走 DOM 樹）。 然后，您可以在元素 X 上使用top 、 right 、 bottom和left css 屬性來放置它，使其與其相關容器的相應邊框保持距離。

例子：

<div id="header">
<p class="elem"></p>
</div>

#header {
  position:relative;
}

.elem {
  position: absolute;
  top: 10px;
}

這個例子將把段落“elem”放在“header”div的頂部，header div的頂部邊框和elem段落的頂部邊框之間的距離為10px。