D3.js d3 svg元素位于单独HTML元素的背景色（但不是内容）之上

好吧，这是个奇怪的问题。我在容器div中有两个div：

<div class="ri-full-width-container">
    <div id="map"></div>
    <div class="ri-limited-width-container">
</div>

D3正在#map div中创建GeoJSON映射。另一个div位于该背景映射的顶部。奇怪的是，重叠div的内容（文本和按钮）如预期的那样出现在地图上。但是覆盖的背景色是可见的，但它位于地图的svg元素后面

我知道SVG的渲染基于它添加到DOM的时间，但由于它们位于DOM中较早出现的div中，更重要的是，覆盖div的其余部分位于SVG之上，有人能解释为什么SVG元素后面有背景色吗

实时代码：

我所说内容的屏幕截图： 这是一个css问题

答案如下：

这里的问题不仅仅适用于SVG。这与元素定位有关。任何定位图元（位置：绝对、位置：相对）都显示在任何未定位图元的前面

您的

.ri有限宽度容器

没有定位，因此它的背景显示在定位的

#map

div后面，而它的子

.ri菜单

被定位，因此它显示在预期的位置

将

.ri有限宽度容器

定位更改为“相对”，应该会得到如下结果：

---

哇-我从来没想到会是这样。你救了我很多心痛！非常感谢。