html - 仅使用 css 向下移动带有“top：0”的导航栏

Question

有一个带有该 css 定义的导航栏：

.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>

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

我只是在寻找一种（css）可能性来移动任何带有css属性“top：0”的html标签以获得固定值。

JavaScript 不是解决方案：我将在几个页面中包含“top-nav”。

编辑：

重叠：

不重叠：

不重叠

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

score 0 · Accepted Answer

您可以尝试：

position: static;

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

score 0 · Accepted Answer

查看您的 html，如果您希望 div 引用他的容器，则必须将其放入容器中。尝试这个：

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

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

编辑1：

如果您无法更改 html，则没有机会。您可以做的是添加一个在顶部导航中添加文本的 javascript。通过这种方式，您可以生成代码以将另一个 div 放入其中。

2 回答 2