如何使用 position: absolute without Overlapping 在垂直方向放置 HTML 元素答案

【问题标题】：How to place HTML elements in vertical direction using position: absolute without Overlapping如何使用 position: absolute without Overlapping 在垂直方向放置 HTML 元素
【发布时间】：2019-12-24 02:06:11
【问题描述】：

我有以下代码

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 布局替代方案来解决这个问题。

【问题讨论】：

也许交换 .sidenav 和 .sidenav ul 所以主 div 是绝对的，子 div 是相对的。

标签： css css-position absolute

【解决方案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>

【讨论】：