如何覆盖整个屏幕

在移动设备上，通常我们会使用汉堡菜单（Hamburger Menu）来隐藏较小的屏幕上的导航栏菜单。当用户点击汉堡菜单时，我们需要显示菜单并覆盖整个屏幕，以确保用户的焦点不会分散。

方式一：使用绝对定位

我们可以将菜单设置为绝对定位，并设置top，left，right，bottom等位置属性来覆盖整个屏幕。

/*菜单*/
.menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #fff;
}

/*菜单显示时添加类名active*/
.menu.active {
    display: block;
}

当我们需要打开菜单时，只需将菜单添加“active”类名即可：

const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');

menuBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
});

方式二：使用fixed定位

如果使用绝对定位时容易导致布局混乱，我们还可以使用fixed定位来覆盖整个屏幕。

.menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #fff;
}

.menu.active {
    display: block;
}

当我们需要打开菜单时，只需将菜单添加“active”类名即可：

const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');

menuBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
});

总结

以上两种方式都可以实现菜单覆盖整个屏幕的效果。使用绝对定位时，需要确保菜单元素的上层元素是相对定位的，否则可能会导致布局混乱。使用fixed定位时则不需要考虑这种情况。