Javascript 在div上定位svg元素

我有一个包含在svg中的d3动画和一个包含我想一起显示的地图的div，并且d3设计位于地图本身之上。地图和svg都应该覆盖整个屏幕

当我将贴图的位置更改为“绝对”时，只会显示贴图，并且d3动画会在其后面消失。如果该位置是相对的，则即使不透明度设置为0.5，贴图也会消失在svg后面。事实上，更改svg或主体的不透明度不会使贴图可见。此外，将地图的z索引更改为10101010也不会使其可见

我应该如何使d3显示在地图上方？我不擅长CSS，如有任何建议，将不胜感激

下面是一个演示问题的片段和完整代码：

//创建数据 var数据=[]； 对于var i=0；i<108；i++{ data.pushi； } //半径刻度 var xr=d3.0刻度 线性的 .domain[0，108] .范围[0,27]； //随机位置刻度 var randomPosition=函数D{ 返回Math.random*1280； } 变量tcColours=['FDBB30'，'EE3124'，'EC008C'，'F47521'，'7AC143'，'00B0DD']； var randomTcColour=函数{ 返回Math.floorMath.random*tcColours.length； }; //SVG视口 var svg=d3。选择“body” .append'svg' .attr'width'，1280 .attr'height'，512； svg.appendtext .attrx，100 艾特里先生，100 .attr文本锚定，中间 .STYLE字体大小，36px .样式“填充”、“白色” .textLorem ipsum； 变量更新=函数{ var baseCircle=svg。选择all'circle'； //绑定数据 baseCircle=baseCircle.datadata； //打转 基圆过渡 .持续时间40000 .attr'r'，xr .attr'cx'，随机位置 .属性'cy'，随机位置 .attr'fill'，无 .笔划宽度，4 .style'stroke'，tColor[随机tColor] baseCircle.enter .附加“圆圈” .attr'r'，xr .attr'cx'，随机位置 .属性'cy'，随机位置 .attr'fill'，无 .笔划宽度，4 .style'stroke'，tColor[随机tColor] .style'opacity'，1； } setTimeoutfunction{update； //做一次 }, 500; window.onload=函数{update；setIntervalueUpdate，50000；}； mapboxgl.accessToken='pk.eyj1ijoic29jawfsymljewnszmilcjhijoitlbhano1cyj9.1k53PW_xMIrcu3TKku4Tzg'； var map=new mapboxgl.map{ 容器：'映射'，//容器id 风格：'mapbox://styles/mapbox/streets-v9“，//样式表位置 中心：[-74.50,40]，//起始位置[lng，lat] 缩放：9//开始缩放 }; html，主体，主体{ 身高：100%； 背景色：130C0E； 不透明度：0.5； 填充：0； 保证金：0； -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } svg{ 宽度：100%； 身高：99%； /*摆脱滚动条*/ } 映射{位置：相对；顶部：0；底部：0；宽度：100%；z索引：10101010}

---

首先，不指定地图的高度。这就是为什么它没有出现。 一旦你这样做了，你就可以完全定位两者，它们就会重叠

//创建数据 var数据=[]； 对于var i=0；i<108；i++{ data.pushi； } //半径刻度 var xr=d3.0刻度 线性的 .domain[0，108] .范围[0,27]； //随机位置刻度 var randomPosition=函数D{ 返回Math.random*1280； } 变量tcColours=['FDBB30'，'EE3124'，'EC008C'，'F47521'，'7AC143'，'00B0DD']； var randomTcColour=函数{ 返回Math.floorMath.random*tcColours.length； }; //SVG视口 var svg=d3。选择“body” .append'svg' .attr'width'，1280 .attr'height'，512； svg.appendtext .attrx，100 艾特里先生，100 .attr文本锚定，中间 .STYLE字体大小，36px .样式“填充”、“白色” .textLorem ipsum； 变量更新=函数{ var baseCircle=svg。选择all'circle'； //绑定数据 baseCircle=baseCircle.datadata； //打转 基圆过渡 .持续时间40000 .attr'r'，xr .attr'cx'，随机位置 .属性'cy'，随机位置 .attr'fill'，无 .笔划宽度，4 .style'stroke'，tColor[随机tColor] baseCircle.enter .附加“圆圈” .attr'r'，xr .attr'cx'，随机位置 .属性'cy'，随机位置 .attr'fill'，无 .笔划宽度，4 .style'stroke'，tColor[随机tColor] .style'opacity'，1； } setTimeoutfunction{ 使现代化 //做一次 }, 500; window.onload=函数{ 使现代化 SetIntervalueUpdate，50000； }; mapboxgl.accessToken='pk.eyj1ijoic29jawfsymljewnszmilcjhijoitlbhano1cyj9.1k53PW_xMIrcu3TKku4Tzg'； var map=new mapboxgl.map{ 容器：'映射'，//容器id 风格：'mapbox://styles/mapbox/streets- v9'，//样式表位置 中心：[-74.50,40]，//起始位置[lng，lat] 缩放：9//开始缩放 }; html， 身体 主要{ 身高：100%； 背景色：130C0E； 不透明度：0.5； 填充：0； 保证金：0； -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } svg{ 位置：绝对位置； 宽度：100%； 身高：99%； /*摆脱滚动条*/ } 地图{ 位置：绝对位置； 排名：0； 底部：0； 宽度：100%； 身高：100%； }