1

#map-canvas の子である div をマップの前に取得しようとしています。

最初に、親の名前を #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-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をマップの前に置くことを妨げていますか?

4

2 に答える 2

0

要素を #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>

それが役立つことを願っています!

于 2013-06-28T23:08:26.703 に答える