相对于绝对定位元素的 CSS 定位答案

【问题标题】：CSS positioning relative to an absolute positioned element相对于绝对定位元素的 CSS 定位
【发布时间】：2015-11-17 13:47:19
【问题描述】：

我有一个 HTML5 页面，其中有一个 <header> 元素，其中包含 <nav> 部分。

由于整体标题的样式和设计，导航绝对位于标题内，而标题本身相对定位。

这对于锚点 <a> 非常有效，它最初是针对的。但是，我现在需要添加一个下拉菜单并使用这个：

http://webdesignerhut.com/css-dropdown-menu/ 和 How to get a drop-down menu to overlay other elements

但是我发现这个和任何其他 CSS 下拉菜单的问题是它们需要父元素相对定位，但我无法标记父 <nav> 既是相对的，又是绝对的。通过对jQuery 替代方案的调查，我也发现了类似的 CSS 要求。

标记：

<html>
  <header>
    <nav>
      <ul>
        <li>
          <a>menu option</a>
        </li>
        <li>
          <a>menu option</a>
          <ul>
            <li><a>submenu option</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>

  <main>
    ...
  </main>
</html>

CSS（简化，这适用于非下拉选择）

header {
  position: relative;
}

nav {
  position: absolute;
}

CSS（下拉菜单需要）

nav {
  position: relative;
}

nav ul {
  position: absolute;
}

那么我怎样才能让nav 元素对其子元素充当position:relative 而对其父元素充当position:absolute？

编辑

这是一个试图概述正在发生的事情的小提琴。 https://jsfiddle.net/8j9z8wak/

似乎最初的原因是header 元素（其中nav 是一个子元素）具有overflow:hidden，这有助于在移动设备上调整大小和可变屏幕尺寸，并在左上角浮动图像标题图像。

我目前正在尝试使用overflow-x 和overflow-y，但这会导致滚动条，而不是与删除overflow:hidden 一起使用的预期溢出

re（仅供参考。）：小提琴有很多 CSS / HTML 部分，问题不在于导航的基本内容，而在于它与这些其他部分的匹配方式，所以我一直保留他们进来了。

我有nav 作为header 的子对象，我需要标题才能使用overflow:hidden，但nav CSS 菜单在没有overflow:hidden 的情况下可以正常工作。

我保留了媒体查询，因为处理较小的屏幕尺寸需要overflow:hidden。
导航菜单元素有一对浮动部分，它们使浮动居中，如从 https://stackoverflow.com/a/21508512/3536236 中找到的那样。这仅适用于今天，因为所有下拉菜单系统都使用浮动元素，并且它们需要居中。

【问题讨论】：

听起来你应该在<nav> 周围有另一个容器元素，将其定位为绝对和导航作为相对。
我在使用两个 div 方法时遇到了问题，下拉菜单不显示，它隐藏在 main 元素后面。
它是隐藏在 main 后面还是在 nav 或 header 元素之外不可见？如果导航或标题有溢出：隐藏；它可能只是没有溢出。否则，您可能需要添加一些 z-index 来强制它在前面。
你能提供一个工作小提琴吗？这是一个简单的问题，但如果没有测试用例，就很难查看您的要求。
@DarrenGourley 我用过z-index，但这并没有帮助。我现在正在尝试删除隐藏的溢出...

标签： html css

【解决方案1】：

在<nav> 中添加另一个容器元素，然后在内部容器上使用position: relative：

<html>
  <header>
    <nav>
    <div>
      <ul>
        <li>
          <a>menu option</a>
        </li>
        <li>
          <a>menu option</a>
          <ul>
            <li><a>submenu option</a></li>
          </ul>
        </li>
      </ul>
    <div>
    </nav>
  </header>

  <main>
    ...
  </main>
</html>

CSS：

header {
  position: relative;
}

nav {
  position: absolute;
}

nav div {
  position: relative;
}

nav div ul {
  position: absolute;
}

【讨论】：

谢谢 Arun，我已经完成了这个，并且有一个可能相关的问题，即菜单的下拉部分不显示并且似乎在页面结构的 <main> 部分“后面”。 :-/

【解决方案2】：

检查此代码以清除概念。

div{
    border:1px solid #f00;    
}
.gp{
    position:relative;
    height:100px;
    width:100%;
    display:block;
    float:left;
    overflow:hidden;
}
.p{
    position:absolute;
    top:30px;
    left:5%;
    z-index:1;
    width:90%;
    height:50px;
}
.c{
    position:relative;
    border:1px solid #0f0;
}

<div class="gp">
    Grand Parents
    <div class="p">
        Parents
        <div class="c"> childs </div>
    </div>
</div>

【讨论】：