时间戳

首页 > 解决方案 > 模态没有覆盖整个文档

css - 模态没有覆盖整个文档

问题描述

我目前正在尝试使我的 .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.

标签： csspositionheightwidth

解决方案

推荐阅读