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

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

html css

如何正确地将HTML元素保存在其父视图中？,html,css,position,element,scaling,Html,Css,Position,Element,Scaling,我的网页分为几个部分，每个部分都有一个h1标题。我已经将文本放置在我认为合适的每个部分的顶部，但是当我将窗口/屏幕大小缩放到某个点时，文本会向上浮动，并覆盖上一部分，如下所示：在刻度断点之前标度断点后如您所见，文本在某个比例点后上浮到透水部分。这是我的HTML： <body> <div class="first-section"> <h1> Dark,Darker,Darkest... Dark

我的网页分为几个部分，每个部分都有一个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>

如何阻止文本从父节上浮起？

这是因为您的top:-200px。。。您正在将h1文本定位到div之外

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

将标题的CSS更改为：

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

它将总是在父div的左上位置。

是的，我知道，我只这样做是因为我想让文本更高一些，在中间部分，我有更多的文本要添加。请看问题中的图片。当我缩小窗口时，我不希望文本上浮并与上一部分重叠。

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