I am using QGIS2web plugin to create a nice page that shows some work-related spatial data. I want to make it nice as possible, and one idea is to have a few normal buttons, preferably directly under the legend, which would lead to another webpage, where I would add some explanation of the map and similar.

I know how to make another web page, I know how to link it to this one, and I know how to make buttons that would lead to that page. But I cannot figure out how to set them over the map, because they are on the top, or at the bottom, or under the map.

For those who know how to solve this, please be as specific as possible - should it be in the index file, or CSS, or somewhere else - I am no expert in HTML unfortunately.

Creating buttons that link to another page and are positioned on a visible part of my GIS web page.


1 Answer 1


The position of the buttons (top, bottom, right, left etc ...) is adjusted with the css code.

For example, this form that links to other web pages is created as follows, placing the code in the index.html in the body section:

enter image description here

<form id="form_smartphone">
                    <b align="center" style="font-size: 13px; font-family: 'arial';">Usi uno smartphone?</b>
                        <a href="https://ecc..." target="_blank"><img src="./html_sidebar_content/android.png" align="center" height="40" width="40"></img></a>
                        <a href="https://ecc..." target="_blank"><img src="./html_sidebar_content/apple.png" align="center" height="40" width="40"></img></a>

And it is positioned at the bottom left and adjusted in the background color, in the borders etc ... with this css code written directly in the index.html file in the head section:

  #form_smartphone {
    background-color: rgba(255, 255, 255, 0.75);
    border: 2px solid #f8f8f8 !important;
    border-top: none !important;
    z-index: 1;
    opacity: 1;
    position: absolute;
    bottom: 25px;
    left: 4.5em;
    margin: 0;
    width: 225px;
    height: 40px;

To adjust above/below you must always interact with the css code with the z-index variable by setting it to 0 on the button that must be below and 1/2/3 etc ... for the buttons that must be above. But be careful, the z-index works within the same div therefore these forms / buttons can be either under the map (not visible) or above (visible), but in this last case when for example you interact with the map by opening the layer switcher, this will necessarily be underneath.

I propose you an alternative solution to all this. What if you put a sidebar such as this on your map? https://github.com/Turbo87/sidebar-v2

You can see it in action in this draft webgis https://www.opengis.it/riserva-nat-stat-gola-del-furlo/

  • This actually helped me a lot. I did exactly this and it works. The only bad thing, I don't know how to insert it with a relative position
    – Tom Tchibo
    Jan 31, 2023 at 14:41
  • Can you explain better so I can give you more targeted help? maybe you can link an example and explain exactly what you want? in principle two objects can be connected to each other and one acquire an absolute position and the other relative with respect to the first object. in the css position:absolute or position:relative Feb 1, 2023 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.