div 与 svg 定位答案

【问题标题】：div versus svg positioningdiv 与 svg 定位
【发布时间】：2015-10-22 05:36:42
【问题描述】：

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

感谢您的任何想法！

【问题讨论】：

因为position:absolute;.
谢谢Alexander - 但是要避免这种情况发生，必须采取什么立场？它也不能与固定一起工作吗？如何将 div 锚定到某个位置，同时避免它出现在 DOM 下方的元素之上？

标签： html dom svg

【解决方案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>

【讨论】：

非常感谢 - 现在 z-index 在 div 上运行良好。