Question

我很难理解为什么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>

感谢您的任何想法！

Answer 1

这是因为您的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>

div与svg定位

1 个答案:

实施例