css - 如何使用位置 : absolute without Overlapping 在垂直方向放置 HTML 元素

Question

我有以下代码

HTML

<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>

CSS

.sidenav {
    position: relative;
}

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

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

问题是第二个<ul>元素在第一个 <ul> 之上.有没有一种方法可以通过使用绝对位置将列表一个放在另一个之上？如果不是，还有什么 CSS 布局替代方法可以解决这个问题。

Answer 1

正如@jmalenfant 建议的那样，将 position 更改为父容器并让子容器相对会得到我相信您正在寻找的东西

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

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

<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>