为什么父元素有时不会覆盖子元素的维度？

Question

Codepen link: https://codepen.io/lolcatBH/pen/OJbgLyd

我有以下 html:

<div id="page">
  <div class="overlay"></div>
  <div class="click">SHOW POPUP</div>
  <div class="popup">
    <h1>Korean language</h1>
    <button class ="close">X</button>
    <div class="desc">Korean (North Korean: 조선말/朝鮮말, chosŏnmal; South Korean: 한국어/韓國語, hangugeo) is an East Asian language spoken by about 77 million people.</div>
  </div>
</div>

和CSS：

#page {
  position: absolute;
  top: 50%;
  left: 25%;
}

.popup {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  z-index: 1;
  position: absolute;
  top: -10%;
  transform: scale(0);
  padding: 20px;
}

#page .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 1;
  display: none;
}

#page.active .overlay {
  display: block;
}

.popup.active {
  transform: scale(1);
  background-color: white;
}

.close {
  position: absolute;
  right: 0%;
  top: 0%;
  color: white;
  background: black;
  border-radius: 50%;
}

.click {
  border: 1px solid black;
  padding: 20px;
  font-size: 20px;
  text-align: center;
  z-index: 0;
  cursor: pointer;
}

h1, desc {
  text-align: center;
}

JS:

const click = document.querySelector('.click');
const x = document.querySelector('.close');
const page = document.querySelector('#page');
const popup = document.querySelector('.popup');

const showPopup = () => {
  page.classList.toggle('active');
  popup.classList.add('active');
}

const hidePopup = () => {
  page.classList.toggle('active');
  popup.classList.remove('active');
}

click.addEventListener('click', showPopup);
x.addEventListener('click', hidePopup);

起初，我试图做的不是创建一个单独的 overlay div，而是要在 #page 元素上放置背景色。但是，实际上，背景仅适用于 button 元素 (.click)。我实际上不明白为什么在这种情况下，因为 background-color 似乎不影响 .popup 元素。

伊姆古尔：https://imgur.com/a/UEgXSlY

所以我的问题是，为什么 #page 元素没有覆盖其子元素的所有宽度和高度？在这种情况下，我认为它会覆盖整个页面。我也试过放置 width: 100vw 和 height:100vh 但它反过来只将尺寸应用于按钮。

伊姆古尔：https://imgur.com/a/QOMlnTs

Answer 1

原因是您的大部分元素 position 设置为 absolute 或 fixed，这使得它们完全 (fixed) 或部分 (absolute) 独立于它们的父元素，即没有 space 为它们保留，因此它们通常与其他元素重叠。

所以父元素不会跨越或覆盖它们，但只有那些没有集合 position 或 position: relative 或 static.[=18 的元素=]

为什么父元素有时不会覆盖子元素的维度？

Why do parent elements sometimes not cover the children's dimensions?

html

css

background

css-position

background-color