将导航变成模态并填满整个屏幕答案

【问题标题】：Turn nav into modal and fill entire screen将导航变成模态并填满整个屏幕
【发布时间】：2016-02-04 10:18:46
【问题描述】：

我有一个导航，我想使用由 javascript 切换的 CSS 类将其转换为模式。问题是，因为这是一个复杂的布局，我无法更改我目前拥有的 HTML 结构，因为这仅适用于使用 mediaquery 的手机。

这个想法是导航看起来以某种方式（即，没有应用模态类），但我将集成一个将“模态”类应用于导航标签的按钮，以使导航标签成为模态框覆盖整个屏幕。

这是我的代码，展示了应用了模态类的导航后的外观：https://jsfiddle.net/spadez/fxnzdofh/3/。

这是我的问题/问题。保持相同的 HTML 结构，如何更改模态 css 以从屏幕的最左上角制作蓝色框，而不是在绿色标题栏下方。最终结果是整个屏幕从一个角落到另一个角落都是蓝色的。

这是我尝试过的代码，但没有给我想要的结果：

.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
}

【问题讨论】：

标签： html css

【解决方案1】：

保持相同的 HTML 结构，如何更改模态 css 以使屏幕左上角的蓝色框？

您忘记添加top 和left 以从top 定位它：

.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
  top: 0;
  left: 0;
}

【讨论】：