时间戳

首页 > 解决方案 > 使用 Folium 地图的 CSS 分层

python - 使用 Folium 地图的 CSS 分层

问题描述

我在一个网站上添加了一张叶地图，该网站有一个带有下拉菜单的导航栏。

问题在于分层。地图出现在下拉菜单中。

我一直在研究 z 分层，但无法弄清楚。

这是该网站的html：

    <!DOCTYPE html>
<html>
  <head>
      <title>Andy Renz Portfolio</title>
      <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
  </head>
  <body>
    <header>
      <div class="navbar">
        <h1 class="logo">Andy Renz Portfolio</h1>
        <div class="dropdown">
          <button class="dropbtn"  id="connect">Connect! 
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="mailto: w.andy.renz.com">Email</a>
            <a href="https://www.linkedin.com/in/andy-renz-b3674168/">Linkedin</a>
            <a href="https://github.com/w-andy-renz">Github</a>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn">Capstone Projects 
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="{{ url_for('dnd') }}">D&D App</a>
            <a href="{{ url_for('plot') }}">Second Ex</a>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn">Udemy Projects 
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="{{ url_for('webscraper') }}">Webscraper</a>
            <a href="{{ url_for('webcam_detector') }}">Webcam Tracker</a>
            <a href="{{ url_for('mobile_app') }}">Mobile App</a>
            <a href="{{ url_for('desktop_database_app') }}">Desktop Database App</a>
            <a href="{{ url_for('dictionary') }}">Command Line Dictionary</a>
            <a href="{{ url_for('geomap') }}">Geomap</a>
            <a href="{{ url_for('plot') }}">Financial Plot</a>
          </div>
        </div>
          <a href="{{ url_for('home') }}" style="float: right;">Home</a>
      </div>
          
      </div>
    </header>
    <div class="container">
        {%block content%}
        {%endblock%}
    </div>
    {%if map==True%}
      {% extends 'theGoods.html' %}
    {%endif%}
  </body>
</html>

类 navbar->dropdown->dropdown-content 中有一个父树。

这是我认为相关的css文件：

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.dropdown {
  float: right;
  overflow: hidden;
  position: relative;
  z-index: 1000;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
}

而从folium地图：

   <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_2880f216fc6244b3ac346d94a08a3a54 {
                    position: relative;
                    width: 75.0%;
                    height: 75.0%;
                    left: 0.0%;
                    top: 0.0%;
                    margin-left: 12.5%;
                    z-index: 0;
                }
            </style>

当我更改z-index为-1. 问题是它破坏了地图的功能。我无法滚动它或选择我的积分。

我需要改变什么？

谢谢！

标签： pythonhtmlcssflaskfolium

解决方案

推荐阅读