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

Question

好的，这很奇怪。我在容器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元素的背后？

直播代码： https://beehivemedia.com/dataviz/map_oddity/test_file.html

我正在谈论的内容的屏幕截图：

Answer 1

这是一个CSS问题，

来自答案here：

  

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

您的.ri-limited-width-container没有定位，因此其背景显示在定位的#map div后面，而其子.ri-menu的位置使其显示为预期。

将.ri-limited-width-container定位更改为亲戚应该会得到以下内容：