Question

大家好，我是新人，请原谅我可能出现的错误！谢谢你的时间..我想问一下如何在我的html页面中将一个按钮带到前面？我试着带上＆＃34; z-index＆＃34;在造型方面，但它不起作用。 :(我设置了一个名为＆＃34的班级的按钮; btn＆＃34;。请它紧急，因为它是我的毕业论文..谢谢你！这是html文件：

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我看到它就像那样，它不对.. error button's position

Answer 1

地图的#basicMap为position:static，因此忽略了z-index。但是，该div中的.OpenLayers_Map_2_OpenLayers_Container具有一个位置：绝对值，其z-index（749）高于按钮（110）。

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

以下是一些：

使地图div #basicMap位置相对（从而启用z-index:0）
授予.olMapViewport z-index
使按钮的z-index大于749

针对该问题的一些问题：

我怎样才能把（一切），html页面中的按钮带到前面？

1 个答案: