段落元素在HTML中重叠

Question

对于一个课程项目，我目前正在从头开始构建一个个人网站，以尝试学习HTML和CSS。我的网站很顺利，直到我添加文字。

以下是我主页的屏幕截图。正如您在第一张图片中看到的那样，我的h3文本在页面底部被压缩，并且h3元素重叠/堆叠在一起。我不知道为什么会这样。我想在h1标签下面制作文字，然后很好地间隔开来制作一个着陆页，看模型。

HTML和CSS代码可以在下面找到：

我的其他页面也有类似的问题。例如，在我的“关于”页面上，我设想它有一个红色渐变背景，上面有白色文字。相反，我在页面的中心得到了这个潦草的文字：

此部分的CSS可以在上面的CSS图像中找到，但这是我的一些HTML的样子

我确定我的文字重叠问题是一个快速修复，但我不知道它在做什么或为什么。如果有人能帮助我，这将是伟大的。感谢

Answer 1

重叠是由bodyText类中的position：absolute，margin-top或top元素引起的。只需从bodyText类中删除top和margin-top，然后将它们放在另一个类中。为不同的段落使用不同的填充。在这里你为所有段落使用相同的填充，所以他们最终来到同一个地方。

     .bodyText{ margin:auto}// put other elements except top and margin-top and position:absolute
      .paddingtop50{ top:50%}
      .paddingtop70{top:70%} // don't use this if not required

      <p class="bodyText paddingTop50">Loren ipsum dolor sit amet<\p>
      <p class="bodyText">Loren ipsum dolor sit amet<\p>

Answer 2

由于position: absolute，h1和h3上设置了.bodyText，您看到文字重叠。
您的h3元素top都设置为100％。这意味着两者都会尝试将自己定位在距离最近的相对定位元素100％（包含块的高度）的位置，我猜这是你的body元素。
对于您的两个p元素以及bodyText类，这是相同的。两者都设置了top:50%，这将使元素出现在同一位置，从而导致重叠 如果您希望在屏幕中垂直居中显示文字，可以better ways进行操作。