如何使<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; 
}