通过仅使用css向下移动“top：0”的导航栏

Question

有一个带有css-definitions的导航栏：

.nav {
    position: absolute;
    top: 0;
    height: 40px;
    ...
}

<div class="nav">...</div>

这意味着此导航始终在页面上。但现在我必须在该导航栏的顶部插入第二个栏。

.top-nav {
    position: absolute;
    top: 0;
    height: 40px;
    ...
}

<div class="top-nav">...</div>
<div class="nav">...</div>

“top-nav”将显示在几个页面上（我现在不知道）。所以我无法更改css定义或类“nav”的html。

我只期待（css）将css-attribut“top：0”的任何html标签向下移动以获得固定值。

JavaScript不是一个解决方案：有几页我会包含“top-nav”。

编辑：

重叠：

不重叠：

我正在寻找不重叠的解决方案。

Answer 1

如果您想要对其容器进行div引用，请查看您的html，您必须将其放入容器中。试试这个：

<div class="nav">
  <div class="top-nav">...</div>
</div>

所以top-nav指的是导航容器。

编辑1：

如果你无法改变html，那就没有机会了。你可以做的是添加一个javascript，在top-nav中添加文本。通过这种方式，您可以生成代码以将另一个div放入其中。

参考jquery text

Answer 2

您可以尝试：

position: static;

或没有位置定义（静态是默认值）。在静态位置，每个框按照它们在html中的顺序显示。