如果元素定位已经受到容器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>

如上所述，标题已就位，公司名称已就位(在标题的左侧(，选项位于标题的最右侧。

我现在的问题是，如果我创建了一个下拉菜单，我将不得不包装(？(选项或将其放在另一个具有position: relative的<div></div>中，因为下拉菜单需要是position: absolute。但当我试着那样做的时候，整个事情都搞砸了。选项不再在右边，而是在左边。我试过看教程，但它们大多是基本的下拉教程或基本的定位教程。

有人能帮我正确定位这些元素吗？或者至少给我指一个正确的方向。任何帮助都将不胜感激。

Answer 1

您可以将标头iddiv包装到另一个div中，为该包装器div提供position:fixed属性值对(pvp(。然后，在标头上使用position:relative，在选项锚上使用position:absolute，并使用top、right、bottom和leftcss属性根据需要定位选项锚。小小的速成班：

position:absolute告诉元素X将其放置在具有position:relativepvp的其父元素中的第一个元素的顶部(向上走DOM-树(。然后，您可以在元素X上使用top、right、bottom和leftcss属性，将其放置在离其相对容器的相应边界有规定距离的位置。

示例：

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

#header {
position:relative;
}
.elem {
position: absolute;
top: 10px;
}

这个例子将把段落"；elem"；在"；标题"；div，标题div的上边界和elem段落的上边界之间的距离为10px。