在CSS中实现弹出窗口的布局问题

Question

你好，我的代码有问题。我正在尝试执行以下操作。单击“打开弹出窗口”时，这将使弹出窗口可见，并且它将覆盖整个屏幕。当单击内容中的X时，这将关闭内容并使它再次使弹出窗口不可见。

我已经使用:target伪类实现了这一点。

您可以在此处查看演示：https://codepen.io/loganlee/pen/Jjdjzom?editors=1100

我有两个问题。首先，OPEN POPUP链接在屏幕顶部可见，并且未被.popup覆盖。即使我已经完成width: 100vw和height: 100vh。

.popup
{
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgba(black, .8);
  opacity: 0;
  visibility: hidden;
  padding: 10rem 0;
}

其次，当屏幕高度真的很小时，.popup__content比.popup高。您可以在图片中看到两者。

我认为我在布局上做错了。谢谢。

Answer 1

将这两种样式添加到您的代码中。针对您的两个问题。

.popup {
  top: 0px;
  left: 0px;
  overflow-y: auto;
}