在引导程序中的图像顶部显示导航栏答案

【问题标题】：Show navbar on top of an image in bootstrap在引导程序中的图像顶部显示导航栏
【发布时间】：2020-12-02 08:41:11
【问题描述】：

我正在开发一个烧瓶、python、HTML、CSS 的投资组合网站。但是，我遇到了一个看似简单的错误，但我无法解决。

我希望导航栏位于我从 Unsplash 使用的背景图像之上。背景图片也显示在所有其他页面上。我不想那样。我想要的只是一个带有背景图像和导航栏的主页，使其看起来不错。联系页面、作品集和关于应该有自己的内容，并且不应显示主页图像。

这就是我的意思。我希望主页与此站点相似，并且在浏览其他图像时应显示其内容 (http://template-shutter.webflow.io/photographers)

http://template-shutter.webflow.io/

这是我的模板代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Jainam's Portfolio</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/style.css">
</head>
<body>

    <nav class="bgimg navbar navbar-expand-lg fixed-top navbar-light">
        <a class="navbar-brand" href="#">First LastName</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="{{url_for('home')}}">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{url_for('about')}}">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{url_for('portfolio')}}">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{url_for('contact')}}">Contact</a>
                </li>                
            </ul>
        </div>
    </nav>

    {% block content %}
    {% endblock %}

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
</body>

主页.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>My Portfolio</title>
</head>

<body>
    {% extends "template.html" %}

    {% block content %}

    <div class="container">
        <h1>Hi</h1>
    </div>
    {% endblock %}
</body>

</html>

CSS

body {
  overflow-x: hidden;
}

.bgimg {
  min-height: 600px;  
  background-image: url('https://images.unsplash.com/photo-1478515463067-d20f52aace26?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar{
  position: relative;
}

【问题讨论】：

标签： python html css flask bootstrap-4

【解决方案1】：

将navbar 的位置添加为relative，而不是使用absolute

 .navbar{
     position:relative;
     z-index:1;
 }

【讨论】：

@user3002108 检查这个
我做到了。它不起作用。它位于图像的中心，当我浏览其他页面时，图像仍然显示。