下拉菜单，绝对和相对

Question

我正在学习CSS，所以我开始创建一个下拉菜单，我有一个问题。这是我的导航结构：

<nav>
  <ul>
    <li>style 1
      <ul class="sub-menu menu-1">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>       
      </ul>
    </li>
    <li>style 2
      <ul class="sub-menu menu-2">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
      </ul>
    </li>
    <li>style 3 </li>
    <li>style 4 </li>
  </ul>
</nav>

我的问题是：为什么必须将子菜单中的每个li定位为绝对，而其父项必须是相对的才能使子菜单下降？ 如果我忽略了我得到以下内容（它会导致导航的整个区域，而不仅仅是子菜单）：

但是如果我将子菜单的父级设置为相对位置，并将子菜单的位置设置为绝对位置，则可以：

我想理解为什么会发生这种情况，绝对和相对立场如何完全发挥作用。谢谢！

Answer 1

绝对元素相对于最近定位的父/祖先定位。如果绝对定位的元素没有定位父元素，则它使用文档正文作为参考。