How can i bring in front of (everything),a button in an html page?

Question

Hello guys i am a new one so forgive me about possible mistakes! Thank you for your time..I would like to ask what can i do to bring in front of everything a button in my html page? I tried to bring it with "z-index" in styling, but it doesn't work. :( I set the button with a class named "btn". Please it's an emergency because it's for my diploma thesis..thank you! Here is the html file:

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>

i see it like that and itsnot right.. error button's position

but its not! :( i dont know if the fault is osm where it disturbs the button.. — Irini K., Mar 03 '18 at 11:27
i added an image in my description, if you click at the end :("error of button's posistion") — Irini K., Mar 03 '18 at 11:32
I can't get the map element to work on [JSFiddle](https://jsfiddle.net/bz7e9mwa/), so I can't test it — GalAbra, Mar 03 '18 at 11:40
yes i know that and i dont know why this is happening...you can copy-paste the code and save it as an html file and open it in your own browser if you want and have time of course.. anyway thank you so much for occupaying with me :) — Irini K., Mar 03 '18 at 11:46
@IriniK. give your button a higher z-index (*set it to 9999*) because the open layers api gives its container a z-index of ~ 750. — Gabriele Petrioli, Apr 17 '18 at 14:44

dube · Answer 1 · 2018-04-19T14:12:17.403

0

The map's #basicMap is position:static, so it's z-index is ignored. However, the .OpenLayers_Map_2_OpenLayers_Container inside that div has a position:absolute with a higher z-index (749) than your button (110).

You can solve it several ways. They might cause side effects, e.g. with map controls, so try it and use what works best for you.

Here are some:

Make the map div #basicMap position relative (and thus enabling the z-index:0)
Give the .olMapViewport an z-index
Make your button's z-index bigger than 749

Some questions targeting that problem:

edited Apr 19 '18 at 14:12

answered Mar 05 '18 at 11:32

dube

4,898
2
23
41

"*has an absolute position and is therefore stronger than your relatively positioned button*". There is no difference in how `absolute` and `relative` positioned elements treat `z-index`. – Gabriele Petrioli Apr 17 '18 at 14:40
@GabrielePetrioli It might not be written that well, but yes, it _can_ change the stacking order, when the positioning hierarchy changes. However, there was an error in the first advice, fixed it. – dube Apr 19 '18 at 09:22
1

i am very confident that stacking order is irrelevant to the positioning type (*besides `static`*), unless i am misunderstanding something. I would be an eye opener if you coud provide a link describing/explaining what you say. – Gabriele Petrioli Apr 19 '18 at 09:47
1

You are totally right, ignore what I said. The problem in the question is that there is are z-index values but no position value (so they are ignored). I mixed that up when answering, leading me to a wrong conclusion. absolute and relative behave the same, z-index only `adds` detail-context (like a version number), it cannot break out of a parent's z-index – dube Apr 19 '18 at 14:06

How can i bring in front of (everything),a button in an html page?

1 Answers1