如何使用 position: absolute 在垂直方向放置 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>

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

How to place HTML elements in vertical direction using position: absolute without Overlapping

css

css-position

absolute