将绝对定位的 DIV 添加到 OpenLayers 地图的底部？答案

【问题标题】：Adding a absolutely-positioned DIV to the bottom of an OpenLayers Map?将绝对定位的 DIV 添加到 OpenLayers 地图的底部？
【发布时间】：2015-12-07 17:59:38
【问题描述】：

我正在尝试将静态图像图例放置在地图顶部的 OpenLayers 地图的右下角。我尝试过使用绝对定位的 DIV，但它往往会被其他对象撞到（即使 z-index 很高）。

有没有办法使用 OpenLayers API 做到这一点？我注意到 OpenMap 有一个 Layer.ScreenOverlay 方法 (http://openspace.ordnancesurvey.co.uk/openspace/example7.html)，这正是我需要的，但在 OpenLayers 中我找不到这样的方法。

【问题讨论】：

您提供的链接现在无效

标签： javascript css openlayers

【解决方案1】：

我遇到了类似的问题，我想在 OpenLayers 地图上放置一个静态图像图例。我的解决方案是使用归因元素http://dev.openlayers.org/examples/attribution.html（查看页面源代码）。

您可以将属性更改为图像而不是文本：

'attribution': "<img src='myimage.jpg'/>"

至于改变attribution在地图上的位置，可以改变div.olControlAttribution的css属性，例如

    div.olControlAttribution {
        left:10em;
        top:10em;
    }

【讨论】：

【解决方案2】：

绝对可以在地图 div 中以更高的 z-index（例如 10000）定位 div

考虑以下 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;
}

【讨论】：

这就是我最初所做的，#legend 叠加层从#map 的右下角向下移动了 200 像素。将 top 设置为 0px 也会超出 #map div 的顶部。几乎就好像它会到达 div 或其他东西后面的瓷砖隐藏范围的顶部。
好吧，那么页面上肯定有其他东西影响了布局。发布您的标记，以便我们可以找到问题。