css - 如何将动画 SVG 定位在 Foundation 6 元素后面？

Question

我想知道是否有一种方法可以使用 Foundation 网格，然后在其他元素的前面或后面添加另一个大于列/行的元素。大对象是背景的一部分，但它是一个动画 svg，所以我不能只将它设置为背景。

CodePen 中有两个示例。第一个(顶部)是带有 Foundation 网格的那个，我正在尝试将这个大的、白色的、大部分透明的 svg 圆圈添加到其中。第二个(底部)示例没有 Foundation 网格，但显示了应有的背景圆圈 (#bg-circle)。

我想可能有一些方法可以用 z-index 来做，但我没有运气。

See the CodePen here

<!-- See the CodePen -->

Answer 1

如果你想放置一个 SVG 作为背景，设置一个更大的容器，然后在上面覆盖基础的网格系统。例如:

HTML 结构:

<div id="container">
    <svg>...</svg>
</div>

<div id="row-container">
    <div class="row">
         <div class="columns ..."></div>
    </div>
</div>

还有 CSS:

#container {
    position: relative;
}

#row-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}