Блог

Главная - Вопросы по программированию - Наслоение CSS с помощью карты Folium

Наслоение CSS с помощью карты Folium

#python #html #css #flask #folium

#python #HTML #css #flask #folium

Вопрос:

Я добавил карту фолиума на веб-сайт, на котором есть панель навигации с выпадающим меню.

Проблема заключается в наслоении. Карта появляется в выпадающем меню.

Я изучал z-layering, но не смог в этом разобраться.

Вот 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') }}">Damp;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;
}

И из карты фолиума:

    <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 . Проблема в том, что это нарушило функциональность карты. Я не мог прокрутить его или выбрать свои точки.

Что мне нужно изменить?

Спасибо!

Метки: