上記のセクションの可視性に基づいてdivsを移動します

Question

私は現在、UdemyのRob開発者向けのWeb開発コースを紹介しています。彼のプロジェクトの1つは、私たちがbbc.co.ukを複製しようとしていることです。

bbc.co.ukと多くの反応ウェブサイトでは、セクションを押すと新しいセクションが表示されます。たとえば、BBCのトップナビゲーションバーで[More]を押すと、より多くのオプションが表示されます。

しかし、わからないことは、他のオプションを公開してページと整列させると、ウェブサイトの残りの部分をどのように下方にシフトさせるかということです。追加のオプションが表示されていない場合は、残りのページがナビゲーションバーのすぐ下に表示されます。

ありがとうございます！

Answer 1

あなたの説明は単純なボックスモデルの動作だと思います。デフォルトでは、DOMで先に定義された要素は、後に続く要素の位置に影響します。したがって、ページ上の高さ、パディング、余白、または以前の要素を隠す/表示することは、後で定義される要素に影響を及ぼし、「プッシュダウン」します。ここに簡単な例があります。

div { 
 
    transition: padding .5s; 
 
} 
 
div:hover { 
 
    padding: 0 0 5em; 
 
}

<div>hover me</div> 
 
<div>this is some more content</div>

そして、ここでは非表示になりますその別だ/パフォーマンスの面で、リフローは、ブラウザのために非常に高価であること、

.hidden { 
 
    display: none 
 
} 
 
div:hover + .hidden { 
 
    display: block; 
 
}

<div>hover me</div> 
 
<div class="hidden">hidden content</div> 
 
<div>this is some more content</div>