我怎样才能在（一切）前面带上一个 html 页面中的按钮？

Question

大家好，我是新人，请原谅我可能的错误！谢谢你的时间..我想问一下我可以做些什么来在我的 html 页面中的所有内容前面添加一个按钮？我尝试在样式中使用“z-index”，但它不起作用。 :( 我用一个名为“btn”的类设置了按钮。这是一个紧急情况，因为它是为了我的毕业论文..谢谢！这是 html 文件：

function init() {
    map = new OpenLayers.Map('basicMap');
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    navigator.geolocation.getCurrentPosition(function (position) {
        document.getElementById('anzeige').innerHTML = 'Latitude: ' +
            position.coords.latitude +
            ' Longitude: ' +
            position.coords.longitude + '<p>';
        var lonLat = new OpenLayers.LonLat(position.coords.longitude,
            position.coords.latitude)
            .transform(
                new OpenLayers.Projection('EPSG:4326'), //transform from WGS 1984
                map.getProjectionObject() //to Spherical Mercator Projection
            );

        markers.addMarker(new OpenLayers.Marker(lonLat));

        map.setCenter(lonLat, 16 // Zoom level
        );

    });
    //map = new OpenLayers.Map("basicMap");
    //var mapnik = new OpenLayers.Layer.OSM();
    //map.addLayer(mapnik);
    map.setCenter(new
        OpenLayers.LonLat(3, 3) // Center of the map
            .transform(
                new OpenLayers.Projection('EPSG:4326'), // transform from WGS 1984
                new OpenLayers.Projection('EPSG:900913') // to Spherical Mercator Projection
            ), 15 // Zoom level
    );
    var markers = new OpenLayers.Layer.Markers('Markers');
    map.addLayer(markers);
}
init();

.btn{
background-color: #000080;
border: none;
color: white;
padding: 3px 20px;
text-align: center;
white-space: nowrap;
font-size: 20px;
left:10px;
top:40px;
cursor: pointer;
position: absolute;  
z-index: 110;   
}

html, body, #basicMap {
padding: 0px;
margin: 0px;
height: 100%;
}

.p1 {
border: none;
color: white;
padding: 3px 32px;
font-family:courier;
text-decoration: none;
display: inline-block;
font-size: 30px;
margin: 5px 1025px;
position: absolute;  
z-index: 100; 
font-weight: bold;
white-space: nowrap;
}

.p2 {
border: none;
color: white;
line-height: 80%;
margin: 10px;
}

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<a class="btn" onclick="myFunction(this)" >Select Point</a>

<p class="p1">Sky Detect App</p>

<p class="p2">Your position estimated by browser geolocation API:</p>

<div id="anzeige" class="p2">(will be displayed here)</div>

<div id="basicMap"></div>

我是这样看的，但它不对.. error button's position

Answer 1

地图的#basicMap 是position:static，所以它的z-index 被忽略了。但是，该 div 中的 .OpenLayers_Map_2_OpenLayers_Container 有一个 position:absolute ，其 z-index (749) 比您的按钮 (110) 高。

您可以通过多种方式解决它。它们可能会引起副作用，例如使用地图控件，因此请尝试并使用最适合您的方式。

这里有一些：

1. 使地图 div #basicMap 位置相对（从而启用 z-index:0）
2. 给.olMapViewport一个z-index
3. 使按钮的 z-index 大于 749

针对该问题的一些问题：

• Z-Index Relative or Absolute?
• Placing absolute behind relative positioned element