javascript 将绝对定位的 DIV 添加到 OpenLayers 地图的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5539633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a absolutely-positioned DIV to the bottom of an OpenLayers Map?
提问by Chris
I'm trying to position a static image legend in the bottom-right corner of an OpenLayers map on top of the map. I've tried with an absolutely positioned DIV, but it tends to get bumped around by other objects (even with a high z-index).
我试图在地图顶部的 OpenLayers 地图的右下角放置一个静态图像图例。我尝试过使用绝对定位的 DIV，但它往往会被其他对象（即使 z-index 高）撞到。
Is there a way to do this using the OpenLayers API? I noticed OpenMap has a Layer.ScreenOverlay method (http://openspace.ordnancesurvey.co.uk/openspace/example7.html) which is exactly what I need, but no such method exists in OpenLayers that I can find.
有没有办法使用 OpenLayers API 做到这一点？我注意到 OpenMap 有一个 Layer.ScreenOverlay 方法（http://openspace.ordnancesurvey.co.uk/openspace/example7.html），这正是我所需要的，但在我能找到的 OpenLayers 中不存在这样的方法。
采纳答案by igorti
It should definitely work to absolutely position a div inside map div with higher z-index(10000 for example)
绝对应该在具有更高 z-index（例如 10000）的地图 div 内绝对定位一个 div
Consider following html and CSS code:
考虑以下 html 和 CSS 代码：
<div id="map" style="height:100%">
<div id="legend"></div>
</div>
#legend{
position:absolute;
right:10px;
bottom:10px;
z-index:10000;
width:100px;
height:100px;
background-color:#FFFFFF;
}
回答by quarkdown27
I've encountered a similar problem, where I wanted to place a static image legend on an OpenLayers map. My solution was to use the attribution element http://dev.openlayers.org/examples/attribution.html(look at page source).
我遇到了类似的问题，我想在 OpenLayers 地图上放置一个静态图像图例。我的解决方案是使用 attribution 元素http://dev.openlayers.org/examples/attribution.html（查看页面源代码）。
You can change the attribution to an image instead of text:
您可以将属性更改为图像而不是文本：
'attribution': "<img src='myimage.jpg'/>"
As for changing the position of the attribution on the map, you can change the css properties of div.olControlAttribution, e.g.
至于改变attribution在地图上的位置，可以改变div.olControlAttribution的css属性，例如
div.olControlAttribution {
left:10em;
top:10em;
}
