Question

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

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

这适用于原本打算使用的锚点<a>。但是，我现在需要添加一个下拉菜单并使用这个：

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

但是我发现的这个以及任何其他CSS下拉菜单的问题是它们要求父元素相对定位，但我可以＆＃39; t将父<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部分，问题不在于导航的基础，而在于它与其他部分的匹配方式，所以我＆＃39;我们让他们进去。

我有nav作为header的孩子，我需要标题才能使用overflow:hidden，但nav CSS菜单按预期正常工作overflow:hidden 。

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

Answer 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;
}

Answer 2

检查此代码以清除概念。

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改

2 个答案: