插入 body 文本后网站标题重新定位

Question

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

我创建了一个 CodePen 笔来展示我的意思，我没有使用图像，而是给出了 header 尺寸和颜色： width: 100%; height: 500px; background-color: red;

我试着玩花车，我把 header 放在它自己的部分，但我不知道发生了什么。

这是 CodePen 的 link：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 是更新后的代码笔。

插入 body 文本后网站标题重新定位

Website title is repositioned when body text is inserted

html

css

zurb-foundation

clip-path