Fatal编程技术网
  • javascript/
  • Javascript 向传单地图添加可单击按钮

Javascript 向传单地图添加可单击按钮

javascript html css leaflet

Javascript 向传单地图添加可单击按钮,javascript,html,css,leaflet,Javascript,Html,Css,Leaflet,我想在传单地图的右上角添加一个按钮（顶部20px，右侧20px）。问题是我不知道如何正确地做到这一点。问题是当我使用传单类“传单顶部传单右侧”时，我的按钮不可单击，当我将鼠标悬停在上面时，什么也没有发生。它只是地图的一部分 以下是我的html代码： <div id="mainContainer"> <div id="mapDiv"> <div id="map">

我想在传单地图的右上角添加一个按钮（顶部20px，右侧20px）。问题是我不知道如何正确地做到这一点。问题是当我使用传单类“传单顶部传单右侧”时，我的按钮不可单击，当我将鼠标悬停在上面时，什么也没有发生。它只是地图的一部分

以下是我的html代码：

        <div id="mainContainer">
            <div id="mapDiv">
                <div id="map">
                    <div class="leaflet-top leaflet-right">
                        <div id="refreshButton"><div id="refreshButtonPictogram"><img src="pictograms/refresh.png" height="30px"></div></div>
                    </div>>
                </div>  
            </div>          
            <div id="bars"></div>
        </div>
以下几点对我很有用：

HTML

<body>
  <div id="map"></div>
  <button id="refreshButton">Refresh Button</button>
</body>
下面是上面的代码

从上面链接的JSBin截图

我也遇到过

更新 我将您的HTML更改为以下内容：

<div id="mainContainer">
  <div id="mapDiv">
    <div id="map">
      <button id="refreshButton">
        Button
      </button>
    </div>
  </div>
  <div id="bars"></div>
</div>
查看中更新的解决方案。

您是否已设置好z索引属性？如果你的按钮不可点击，我想你应该尝试操纵z索引我甚至尝试将#refreshButton的z索引设置为10000，但它不起作用，而其他z索引又如何？你有没有试过只删除和设置你需要的这个z？我明天会检查你的代码，我现在不行。是的，据我所知，基本上我用z-index做了所有的尝试。不过我对网络编码还不熟悉。是的，我尝试了绝对位置，但正如你在我的代码中看到的，它的结构就像左边有地图，右边有条形图。当我使用“绝对位置”调整浏览器的窗口大小时，会打破这一点。或者，我不知道如何正确地执行此操作-即使窗口调整大小，按钮仍保持在相同的位置。哦，我有它。我必须设置“位置：相对”到祖先分区。好吧，很好地解决了这个问题！我还更新了我的答案，使用了你在问题中指定的HTML。你最终给了哪个祖先div一个
relative
to？mapDiv的位置。我把传单从课堂上拿了下来。 
#refreshButton {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  z-index: 400;
}

<div id="mainContainer">
  <div id="mapDiv">
    <div id="map">
      <button id="refreshButton">
        Button
      </button>
    </div>
  </div>
  <div id="bars"></div>
</div>

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