%include% 组件隐藏网页上的其他元素答案

【问题标题】：%include% component hides other elements on web page%include% 组件隐藏网页上的其他元素
【发布时间】：2021-03-28 03:07:34
【问题描述】：

我正在构建一个网络应用程序，其中包含我家乡场馆的交互式地图。该应用程序是用 Django 编写的，地图本身是使用 Folium 构建的，然后保存为 map.html 并在模板中呈现如下：

{% extends "venues/layout.html" %}
{% block body %}
    {% include 'venues/map.html' %}
{% endblock %}

layout.html 文件只有一个引导导航栏：

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="navbar-default">
        <a class="navbar-brand" href="/">CultureMapMilano</a>
        <div>
            <ul class="navbar-nav mr-auto">
                {% if user.is_authenticated %}
                <li class="nav-item">
                    <a class="nav-link"
                        href=""><strong>{{ user.username }}</strong></a>
                </li>
                {% endif %}
                {% if user.is_authenticated %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'logout' %}">Log Out</a>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login' %}">Log In</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'register' %}">Register</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </nav>
    {% block body %}
    {% endblock %}
    
    <script src="" async defer></script>
</body>

问题。当我点击地图时，导航栏就会消失。它仍然在 DOM 中，但在地图的后面。我认为这是我可以用 css 解决的问题，但我不知道如何解决（向导航栏添加高 z-index 没有帮助）。有趣的是，将 %include% 放在 a 中意味着地图不显示 - 不知道为什么。

有人可以提出解决此问题的方法或解决方法吗？

【问题讨论】：

标签： html css jinja2

【解决方案1】：

找到答案：只需将height 属性设置为例如生成 Folium 地图时为 90%。

【讨论】：