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

Question

我目前正在尝试通过Rob的Udemy网站开发入门课程。 他的项目之一是让我们尝试复制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>