div versus svg positioning

我很难理解为什么div中的内容出现在svg的内容之上，尽管svg是在div之后添加到页面的。

我刚刚读了一堆类似的帖子，但没能找到一些适用于我的问题，所以我真的希望有人注意到下面的代码有问题。为了澄清，3个矩形出现在3个圆圈的顶部-我已经尝试在div上使用z-index属性，但它没有效果。

<html>
    <body>
        <div class = "scrollMenu" style="position:absolute; left:0%; top:10%;">
            <svg>
                <rect>
                <rect>
                <rect>
            </svg>
        </div>
        <svg>
            <g>
                <circle>
                <circle>
                <circle>
            </g>
        </svg>
    </body>
</html>

谢谢你的建议!

这是因为您的div有定位和定位元素堆栈在非定位元素之上。

要解决这个问题，您可以将position: relative添加到svg元素中。

例子:

svg {
    width: 200px;
    height: 200px;
}
svg.red {
    background: red;
    position: relative;
}
svg.blue {
    background: blue;
}

<div class="scrollMenu" style="position:absolute; left:0%; top:10%;">
    <svg class="blue">
        <rect />
        <rect />
        <rect />
    </svg>
</div>
<svg class="red">
    <g>
        <circle />
        <circle />
        <circle />
    </g>
</svg>

例子:

相关内容

最新更新

热门标签：