Question

我试图将我创建的两条弧线定位在我拥有的地图上，而不是在其下方。我相信这是我的CSS的问题-特别是绝对定位还是相对定位，但也许不是吗？

图表＆chart2 =弧形

以下是相关代码：

<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;
}

Answer 1

这非常粗糙，但是它演示了如何使用绝对定位和z-index将arc-container移动到map上。

#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>

尝试将SVG定位在地图上方，而不是在地图下方

1 个答案: