html - 插入正文时重新定位网站标题

Question

我正在创建一个网站标题，它是一个梯形图像，上面有网站标题。它看起来是我想要的方式，直到我在主体部分的下方插入文本内容。当我这样做时，标题会向下移动并且不再位于图像的中央。

我创建了一个 CodePen 笔来展示我的意思，而不是使用图像，我只是给出了标题尺寸和颜色: 宽度:100%；
高度:500px；
背景颜色:红色；

我尝试使用 float ，我将标题包含在它自己的部分中，但我无法弄清楚发生了什么。

这是 CodePen 的链接:CodePen

有人可以帮忙吗？谢谢。

Answer 1

只需提供您的 .header position:relative 即可。

.header {
  width: 100%;
  height: 500px;
  background-color: red;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
    background-repeat: no-repeat;
    background-size: cover;

  position:relative;
}

Here是更新后的codepen。