HTML 中重叠的段落元素

Question

为了一个class项目，我目前正在构建一个个人网站作为一个项目，从头开始尝试学习HTML和CSS。我的网站运行良好，直到我开始添加文本。

下面是我主页的截图。正如您在我的第一张图片中看到的那样，我的 h3 文本在页面底部被揉成一团，并且 h3 元素 overlapping/stacked 彼此重叠。我不知道为什么会这样。我想在 h1 标签下方制作文本，并很好地隔开以制作登录页面，请参阅模型。

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

我在其他页面中也遇到了类似的问题。例如，在我的关于页面上，我设想它有一个红色渐变背景，上面有白色文本。相反，我在页面中央看到了这个被揉成一团的文本：

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

我确定我的文本重叠问题可以快速解决，但我不知道它在做什么或为什么。如果有人可以帮助我，那就太好了。谢谢

Answer 1

重叠是由 position:absolute、margin-top 或 bodyText class 中的顶部元素引起的。只需从 bodyText class 中删除顶部和 margin-top 并将它们放在另一个 class 中。对不同的段落使用不同的填充。在这里，您对所有段落都使用了相同的填充，因此它们最终出现在同一个地方。

     .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

由于 h1、h3 和 .bodyText 上设置的 position: absolute，您会看到文本重叠。
您的两个 h3 元素都将 top 设置为 100%。这意味着两者都会尝试将自己定位在距离最近的相对定位元素下方的 100%（包含块的高度），我猜这就是你的情况下的 body 元素。
这对于您的两个 p 元素以及 bodyText 的 class 都是一样的。两者都设置了top:50%，这会使元素出现在相同的位置，造成重叠。
如果您希望将文本在屏幕中垂直居中，可以使用 better ways。

HTML 中重叠的段落元素

Paragraph elements overlapping in HTML

html

css

css-float