Question

我目前正在尝试使.modal类的黑色背景跨越整个文档的长度和宽度（而不仅仅是当前正在执行的整个视口）。制作它也很棒，这样您就无法在与之交互之前再滚动该文档。

我已验证其父容器为body，我认为该容器应至少为600px，这是因为我的容器各自的最小高度为300px，并且它们彼此堆叠。我既使用了100％的宽度，又使用了100％的高度，并完全定位了我的元素，但运气不佳，无法覆盖视口底部以外的任何内容。我使用z-index来确保它位于页面中其他元素的顶部，并且似乎没有任何作用。

<body>
  <main class="todo">
    <section class="todo__ctn todo__ctn--lists">
      <span>Hello man...lists</span>
    </section>
    <section class="todo__ctn todo__ctn--tasks">
      <span>Hello man...tasks</span>
    </section>
  </main>

  <div class="modal">
    <div class="modal__content">
      <p>Hello Man...content</p>
    </div>
  </div>
</body>
````````````````
/* SCSS Styling */
* {
  box-sizing: border-box;
}

.todo {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  border: 1px solid black;
  &__ctn {
    min-height: 300px;
    &:first-child {
      border-bottom: 1px solid black;
    }
  }
  &__ctn--lists {
    background: gold;
  }
  &__ctn--tasks {
    background: tan;
  }
}

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0,0,0,.8);
  color: orange;
  &__content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
  }
}

Like I had mentioned, I would like to have the black background persist, even when you scroll down the page. Once I scroll past the bottom of the viewport, the black background seems to stop and I don't know why.

模态不能覆盖整个文档

0 个答案: