css - #map-canvas 的孩子可以在地图前面吗？

Question

我正在尝试在地图前面获取一个 div，它是#map-canvas 的一个子项。

起初，我将父级的名称更改为#maps-canvas，这样地图就不会再出现了。

我更改了不同的 CSS 参数，效果很好。然后我将 div 改回 #map-canvas （我还更改了我的 CSS 文件中的 id），所以地图会再次出现。有趣的是，子 div 消失了。然后我添加了一个 z-index（子：100，父：1），但仍然没有变化。

这是代码：

HTML<div id="map-canvas"> <div id="TEXT13"></div> </div>

CSS #map-canvaswidth:100%; height:93%; top:7%; z-index:1;

CSS #TEXT13

top: 70%;
left:40%;
height: 30%;
width: 20%;
background-color: blue;
border: 1px solid black;
position:relative;
z-index: 900;

我做错了什么还是谷歌代码阻止了 div 在地图前面？

score 0 · Accepted Answer

“您不能将元素放置在画布内（并且两者都显示）；它们仅在浏览器不理解画布元素时才会显示。”

您必须实现类似 Andys answer 的东西才能获得相同的效果。（绝对定位）

score 0 · Accepted Answer

我建议不要将元素放在#map-canvas 中作为子元素，而是将其放在#map-canvas 之前作为绝对定位元素。然后在#map-canvas 上方设置z-index。这将允许它充当地图顶部的叠加层。

示例：

#something_you_want_on_top_of_map {
    width: 300px; /* set to same size as map */
    height: 300px;
    position: absolute;
    z-index: 100;
}

html示例：

<div id="something_you_want_on_top_of_map">content...</div>
<div id="map-canvas"></div>

希望有帮助！

2 回答 2