html - 像 div 行为一样降低高度，而不会弄乱子元素的布局

Question

我有一个父 div，它有一个固定位置，还有一个子 div，它有一个固定位置(可以更改)并且里面有文本。此子文本以父 div 为中心。

我想通过更改一些 CSS 来创建一种行为，当父 div“高度”减小时，带有文本的子 div 保持相同的位置，如果父 div 没有覆盖它则不会显示。

下面的代码片段显示了我当前的布局。

#parent {
  position:fixed;
  background:red;
  width:100vw;
  height:100vh;
}

#child { 
  color:black;
  font-family:Arial;
  position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

<div id="parent">
  <div id="child">
    <h1>
      TEST
    </h1>
  </div>
</div>

我希望通过更改一些 CSS 来实现的是这样的:

http://prntscr.com/bjin61

比如当魔法值在 50% 左右时，它应该只显示黄色边框中突出显示的区域，文本被截掉(这很重要)。

Answer 1

您需要以绝对单位明确设置子位置，而不是父位置的百分比。如果将位置设置为 fixed，child 将完全独立于 parent，因此它需要是 absolute。最后，为父级 overflow hidden 元素。

#parent {
  position:fixed;
  background:red;
  width:100vw;
  height:47vh;
  overflow: hidden;

}

#child { 
  background: yellow;
  color:black;
  font-family:Arial;
  position:absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
}

<div id="parent">
  <div id="child">
    <h1>
      TEST
    </h1>
  </div>
</div>