如何使<nav>菜单重叠页面的主体？

Question

我正在尝试创建一个包含多个块部分的页面，并且我喜欢标题部分中的菜单与主体部分中的内容重叠。问题是，我的标题<div>不断变大，这会弄乱我的整个页面。我要去的菜单是我在课堂上学会做的复选菜单菜单。

这样的事情：

Answer 1

您需要制作正在显示的下拉列表position: absolute。 标题将会扩展，因为您在其中显示相关项，从而使容器更大。通过使用position: absolute;，您将元素从流中取出，因此容器不会变大。

Demo without position: absolute;

Demo with position: absolute;

在第二个中，您要设置绝对元素的位置：

input[type=checkbox] ~ nav {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
}

然后在选中复选框时显示：

input[type=checkbox]:checked ~ nav {
  display: block;
}