Проблема с компоновкой при реализации всплывающего окна в CSS

Question

Здравствуйте, у меня есть некоторые проблемы с кодом. Я пытаюсь сделать следующее. При нажатии кнопки OPEN POPUP это сделает видимым всплывающее окно и охватит весь экран. При нажатии на 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;
}