d3在单独的HTML元素的背景色（但不是内容）顶部的svg元素

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没有定位，因此，尽管其子.ri-menu定位所以会出现如预期的背景下出现的定位#map DIV后面。

改变.ri-limited-width-container定位相对应让你像：