Fatal编程技术网
  • css/
  • Css 如何在谷歌地图上定位带有控件的表单？

Css 如何在谷歌地图上定位带有控件的表单？

css google-maps html google-maps-api-3

Css 如何在谷歌地图上定位带有控件的表单？,css,google-maps,html,google-maps-api-3,Css,Google Maps,Html,Google Maps Api 3,我有一个小表单，上面有一个控件，我想把它放在我的谷歌地图上，就在最左上角 对于这个问题，我找到了一些解决方法： 但是，这些都不适合我。我要么看到没有表单控件的映射，要么看到只有表单控件但没有映射。有什么问题吗 我最新的HTML和CSS： HTML: <html> <body> <div id="wrapper"> <div id="map_canvas"></div> <div

我有一个小表单，上面有一个控件，我想把它放在我的谷歌地图上，就在最左上角

对于这个问题，我找到了一些解决方法：

但是，这些都不适合我。我要么看到没有表单控件的映射，要么看到只有表单控件但没有映射。有什么问题吗

我最新的HTML和CSS：

HTML:

<html>
    <body>
    <div id="wrapper">
        <div id="map_canvas"></div>
        <div id="over_map">
            <p>Select something!</p>
            <select>
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
            </select>
        </div>
    </div>
    </body>
</html>

html { height: 100%; width: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { position: absolute; top: 10px; left: 10px; height: 100%; width: 100%; }
#wrapper { position: relative; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
从CSS中删除此行：

#wrapper { position: relative; }
地图平移和缩放控件位于左上角，因此请小心放置或禁用这些控件

jsfiddle上的工作示例：

它工作了。出于某种原因，我的.css文件也没有正确上传到FTP。我更改了.css的名称，现在它可以工作了。谢谢