html - cssのみを使用して「top：0」でナビゲーションバーを下に移動する

Question

その css-definitions を持つナビゲーションバーがあります。

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

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

つまり、このナビゲーションは常にページの上にあります。しかし今、そのナビゲーションバーの上部に 2 つ目のバーを挿入する必要があります。

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

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

その「トップナビ」が数ページに表示されるようになります（今は知りませんでした）。したがって、クラス「nav」のcss定義またはhtmlを変更できません。

css属性「top：0」を持つhtmlタグを固定値に移動する（css）可能性のみを探しています。

JavaScript は解決策ではありません。その「トップナビゲーション」を含めるページがいくつかあります。

編集：

重複：

重複しない:

重ならない

重複しないソリューションを探しています。

score 0 · Accepted Answer

彼のコンテナへのdiv参照が必要な場合は、htmlを見て、コンテナ内に配置する必要があります。これを試して：

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

したがって、トップナビゲーションはナビゲーションコンテナを参照します。

編集1：

html を変更できない場合は、チャンスはありません。できることは、top-nav 内にテキストを追加する JavaScript を追加することです。このようにして、別の div を内部に配置するコードを生成できます。

score 0 · Accepted Answer

あなたは試すことができます：

position: static;

または位置定義なし (static がデフォルト)。静的な位置では、各ボックスは html にある順序で表示されます。

2 に答える 2