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

Question

我目前正在尝试通过Rob介绍Udemy的网络开发课程。他的一个项目是让我们试图复制bbc.co.uk

在bbc.co.uk和许多响应式网站上，当你按一个部分时，它会显示一个新的部分。例如，当您按＆＃34;更多＆＃34;在英国广播公司的顶级导航栏中，它显示了更多选项。

但我无法弄清楚当你揭示更多选项以便它与页面对齐时，你如何向下移动网站的其余部分。当没有显示其他选项时，页面的其余部分就在导航栏的正下方。

谢谢！

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>