如何防止 svg 将内容推到顶部？

Question

https://codepen.io/diana-larussa/pen/OJgjLqj 代码看起来基本上是这样的：

contact-section
svg-container
footer

我认为图像非常不言自明...我也尝试使用 :before 解决它，但它不起作用...请帮助。

Answer 1

您可以从文档流中移除 svg 容器（这样它就不会被表单推送），并将其放置在相对于父元素的顶部。

首先将两个元素包含在一个共同的父元素中：

<div class="main-wrapper">
    <div class="main-container"></div>
    <div class="svg-container"></svg>
</div>

将 svg 容器设置为绝对定位（绝对相对于其父级，这就是 main-wrapper 具有 position:relative 的原因）。

.main-wrapper {
    position: relative;
    overflow: hidden;
}
.main-container {
    /* ... */
    position: relative; /* necessary for z-index */
    z-index: 1; /* keep the content above svg-container */
}
.svg-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}