html - 根据上述部分的可见性向下移动 div

Question

我目前正在尝试学习 Rob 在 Udemy 上介绍的网络开发类(class)。他的一个元素是让我们尝试复制 bbc.co.uk

在 bbc.co.uk 和许多类似的响应式网站上，当您按下一个部分时，它会显示一个新部分。例如，当您在 BBC 的顶部导航栏上按“更多”时，它会显示更多选项。

但我不明白的是，当您显示更多选项以使其与页面对齐时，您如何向下移动网站的其余部分。当附加选项未显示时，页面的其余部分位于导航栏的正下方。

谢谢!

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>