＃map-canvas的孩子可以在地图前吗？

Question

我正试图在地图前面找到一个div，它是＃map-canvas的孩子。

首先，我将父级的名称更改为＃maps-canvas，因此不再显示地图。

我改变了不同的CSS参数，它运行得很好。然后我将div改回#map-canvas（我也更改了我的CSS文件中的id），因此地图会再次出现。 有趣的是，儿童div消失了。然后我添加了一个z-index（child：100，parent：1），但仍然没有变化。

以下是代码：

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

CSS＃map-canvas width: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;

我做错了什么，或Google代码是否阻止div出现在地图前面？

Answer 1

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

Css示例：

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

希望有所帮助！

Answer 2

“您不能在画布中放置元素（并且都显示）;只有在浏览器不理解画布元素时才会显示它们。”

Placing a <div> within a <canvas>

你必须实现类似Andys的回答才能获得相同的效果。 （绝对定位）