CODEWITHSUNDEEP
d3.jssvggeojson
billshander
billshander

Reputation: 48

d3 svg elements on top of background color (but not content) of separate HTML element

OK, this is a weird one. I have two divs inside a container div:

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

D3 is creating a GeoJSON map in the #map div. The other div sits on top of that background map. What's odd is that that overlay div's content (text and buttons) appear over the map, as expected. BUT the background color of the overlay is visible, but it's BEHIND the svg elements of the map.

I know that SVG renders based on when it's added to the DOM, but since they're in a div that appears earlier in the DOM and, more importantly, the rest of that overlay div is on top of the SVG just fine, can anyone explain why the background color is behind the svg elements?

Live code: https://beehivemedia.com/dataviz/map_oddity/test_file.html

Screenshot of what I'm talking about: enter image description here

Upvotes: 2

Views: 673

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

This is a css issue,

from an answer here:

The issue here doesn't just apply to SVGs. It's to do with element positioning. Any positioned elements (position:absolute, position:relative) are displayed in front of any non-positioned elements.

Your .ri-limited-width-container has no positioning, so its background appears behind the positioned #map div while its child .ri-menu is positioned so it appears as intended.

Changing the .ri-limited-width-container positioning to relative should get you something like:

enter image description here

Upvotes: 2

Related Questions