为什么父元素有时不能覆盖子元素的尺寸？

Question

Codepen 链接： 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 ）独立于它们的父元素，即没有为它们保留自己的空间，因此它们通常与其他元素重叠元素。

所以父级不会跨越或覆盖它们，但只有那些没有设置position或具有position: relative或static的元素。