CODEWITHSUNDEEP
javascriptcssd3.jsdata-visualization
bullybear17
bullybear17

Reputation: 889

Trying to Position SVG OVER Map, not UNDER it

I'm trying to position two arcs I have created OVER a map I have, not under it. I believe this is an issue with my CSS - specifically absolute vs relative positioning but perhaps not?

chart & chart2 = the arcs

Here is the relevant code:

<div id="map2"></div>  
<div id="arc-container">
<div id="chart"></div>
<div id="chart2"></div>
</div>

#chart {
    position: absolute;
    left: 100px;
    top: 200px;
}

#chart2 {
    position: absolute;
    left: 100px;
    top: 300px;
}

#map2 {
    width: 95%;
    height: 95%;
    margin: auto; 
}

#arc-container {
    position: relative;
}

#arc-container > #map2 {
    position: absolute;
}

Upvotes: 0

Views: 61

Answers (1)

DriveItLikeYouStoleIt
DriveItLikeYouStoleIt

Reputation: 669

This is pretty crude, but it demonstrates how to move your arc-container on top of map using absolute positioning and z-index.

#chart {
    left: 100px;
    top: 200px;
    border: solid black 1px;
    border: solid green 1px;
}

#chart2 {
    left: 100px;
    top: 300px;
    border: solid green 1px;
}

#map2 {
    width: 95%;
    height: 95%;
    margin: auto; 
    background: blue;
    color:white;
    position: absolute;
}

#arc-container {
    border: solid red 1px;
    position: absolute;
    background: white;
    z-index: 99;
}
<div id="map2">This is the map. This is the map. This is the map. This is the map. This is the map. This is the map. This is the map. This is the map. This is the map. This is the map. </div>  
<div id="arc-container">
<div id="chart">This is one chart.</div>
<div id="chart2">This is another chart.</div>
</div>

Upvotes: 1

Related Questions