html - SVG 作为 div 背景

Question

我想做的是有一个类似于这里实现的动画 SVG 背景，用于学习:https://conference.laravel.com/

看来我不能用这个 css svg 背景，所以我需要创建与 html 内联的元素。这是我得到的结果:

完整代码

http://jsfiddle.net/C8d34/13/

我希望 svg 舞台占据整个蓝色区域，这样我就可以将 svg 元素放入其中并像第一个链接那样应用动画。但是，我的标题菜单内容迫使 svg 超出蓝色区域。

如何让它坐在内容后面而不被它压倒？创建另一个 div 是唯一的方法吗？

我的 SVG 代码

<svg viewBox="0 0 100 100"> /* this here */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

但是因为盒子里还有其他内容，我希望我的 svg 占据 100% 的蓝色区域，它强制 SVG 向下。

问题

我想在蓝色区域有一个带有多个动画元素的动画 svg 背景。但是，标题将整个 svg 区域向下推离蓝色区域。如何让它看起来像背景并将我的内容置于顶部？

Answer 1

我将 z-index 属性赋予了 nav 元素，这样链接就可以点击了。并为 SVG 元素使用 position:absolute。检查 DEMO .

svg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
div.buttons{position:absolute; bottom:0;} /*div contains the buttons like Free Trial*/
nav{position:relative;z-index:1;}