Css 如何使用position:absolute在垂直方向放置HTML元素而不重叠

我有以下代码

HTML

---

问题是第二个

元素位于第一个

元素的顶部。有没有一种方法可以通过使用绝对位置将列表一个置于另一个之上？如果没有，还有什么CSS布局可以替代这个方法。

正如@jmalenfant建议的那样，将

位置更改为父容器，并让子容器成为相对的，我相信您会找到它


.sidenav{
位置：绝对位置；
左：50%；
转换：转换（-50%，0%）；
}
.sidenav ul#语言菜单li{
显示：内联块；
}



家


关于




EN


FR


可以交换
.sidenav
和
.sidenav ul
，这样主div是绝对的，子div是相对的。
<div class="sidenav">
<ul>
  <li class="nav-item">
    <a class="nav-link">
      Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link">
      About
    </a>
  </li>
</ul>
<ul id="language-menu">
  <li class="nav-item">
    <a class="EN nav-link">
      EN
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link">
      FR
    </a>
  </li>
</ul>
</div>

.sidenav {
    position: relative;
}

.sidenav ul {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

.sidenav ul#language-menu li{
    display: inline-block;
}