В настоящее время я пытаюсь сделать так, чтобы черный фон моего класса .modal охватывал всю длину и ширину документа (а не только весь видовой экран, которым он сейчас занимается). Также было бы здорово сделать это, чтобы вы больше не могли прокручивать документ, пока не взаимодействуете с ним.
Я убедился, что его родительский контейнер будет body, который, как я полагаю, должен иметь размер не менее 600 пикселей из-за того, что мои контейнеры имеют минимальную высоту 300 пикселей каждый, и они уложены друг на друга. Я использовал и ширину 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.