Question

我的网页分为几个部分，每个部分都有一个h1标题。我已将文本定位在我认为合适的每个部分的顶部，但是当我将窗口/屏幕大小缩放到某个点时，文本会浮动并覆盖透过的部分，如下所示：

在规模突破之前

规模突破后

正如您所看到的，文本在某个比例点之后浮动到前一部分。这是我的HTML：

    <body>
      <div class="first-section">
        <h1>
          Dark,Darker,Darkest... Darker than Darkest... Darkest-est, whatever you get the point.
        </h1>
      </div>
      <div class="second-section">
        <h1>
          You must be looking at this guy, really weirded out... Well   guess what, so is he.
        </h1>
      </div>
      <div class="third-section">

      </div>
      <div class="fourth-section">

      </div>
    </body>

这是我的CSS：

/* Sections */

.first-section {
  position: relative;
  height: 100vh;
  background-color: #6666FF;
  background-image: url(https://s3-us-west-2.amazonaws.com/assets/hallway.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  position:relative;
}
.first-section h1 {
  position: relative;
  color: #FFD700;
  font-size : 6vw;
  margin: auto;
  top: -200px;

}
.second-section {
  position: relative;
  height: 100vh;
  background-color: honeydew;
  background-image: url(https://s3-us-west-2.amazonaws.com/assets/awe.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  position:relative;
}
.second-section h1 {
  position: relative;
  color: #FFD700;
  font-size : 6vw;
  margin: auto;
  top: -200px;
}

如何阻止文本浮出其父节？

Answer 1

这是因为你的顶级：-200px; ...你正在将你的h1文本放在div之外。

你能提供一个完整的例子吗？你想要实现什么目标？

Answer 2

将标题的CSS更改为：

.second-section h1 {
  position: absolute;
  color: #FFD700;
  font-size : 6vw;
  margin: auto;
  top: 0;
  left: 0;
}

然后它将始终位于父div的左上角位置。

如何正确地将HTML元素保存在其父视图中？

2 个答案: