Html 如何将顶部的导航栏与下方的图片对齐？

我的网站在这里：blackdeath1098.github.io

正如您在顶部看到的，导航栏不在顶部，图片也不在其下方

我能做些什么来实现这一点

大概是这样的：

看到顶部的导航栏在图片上方是如何透明的了吗

---

基本上就是这样。

查看网站代码后，您的导航栏当前位于图像下方，只需移动即可

<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">Home</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About Me</a>
                </li>
                <li>
                    <a class="page-scroll" href="#projects">Projects</a>
                </li>
                <li>
                    <a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact Me</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

切换导航

---

在图片上方而不是下方。

查看网站代码后，您的导航栏当前位于图片下方，只需移动即可

<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">Home</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About Me</a>
                </li>
                <li>
                    <a class="page-scroll" href="#projects">Projects</a>
                </li>
                <li>
                    <a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact Me</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

切换导航

---

在图像上方而不是下方。

只需使用导航包装器包装您的导航标签，并在下面的CSS中应用提及样式

我希望有帮助

HTML:

---

享受：）

只需使用导航包装器包装您的导航标签，并在下面的CSS中应用提及样式

我希望有帮助

HTML:

享受：）

//jQuery在滚动时折叠导航栏
$（窗口）。滚动（函数（）{
如果（$（“.navbar”）.offset（）.top>175）{
$（“.navbar固定顶部”）.addClass（“顶部导航折叠”）；
$（“.navbar固定顶”）.removeClass（“透明”）；
}否则{
$（“.navbar固定顶部”）.removeClass（“顶部导航折叠”）；
$（“.navbar固定顶”）.addClass（“透明”）；
}
});
//页面滚动功能的jQuery-需要jQuery插件
$（函数（）{
$（'a.page-scroll'）.bind（'click'，函数（事件）{
var$anchor=$（此）；
$（'html，body'）.stop（）.animate({
scrollTop:$（$anchor.attr（'href'））.offset（）.top
}，1500年，“easeInOutExpo”）；
event.preventDefault（）；
});
});

.navbar默认值{
位置：绝对位置；
排名：0；
宽度：100%；
}
切换导航














西蒙的官方网页
大家好，欢迎来到我的网站
了解一下这个网站


在我有生之年，我建立了许多个人网站，主要是因为我不能满足于它们的外观或结果。然而，我已经决定把我的思想和身体的挑战，从零开始创造，又一个，更正式
个人网站。从现在起，所有的工作将只在这个网站上完成。除非我需要大修或整容，这是我将不断更新的网站。代码可在github上的以下位置查看：













关于我的一点
我叫西蒙·张。我目前是特特特伯罗卑尔根县技术学校的大一新生（撰写本文时，时间是2016年）。自从我第一次开始编程以来，已经有很长一段时间了。我最初是从Python开始的，但当时我
他很年轻，对这件事没有什么意义。在学习了HTML、CSS、Bootstrap和其他前端开发之后，我又回到了it。然后我专注于Python，并学习了如何将其用于脚本编写。我现在正在学习后端
用烧瓶（我绝对讨厌PHP）。其他计划将在稍后出台，因为Github的创建者Chris Wanstrath表示，对未来没有太明确的计划。然而，我至少有一些松散定义的下一步行动计划
其中包括Javascript（JQuery和Angular）、Flask、一些网站更新（RSS提要？）和可卡因牛仔。过去我可能会想学习C++。我有几个项目，我正在工作，更多的将来。我的项目可以
可以在我的“项目”选项卡中看到。





然而，目前我正在找工作。我的语言技能包括：


英语（母语）
中文（对话）
法语（基础）



我的编程语言技能包括：

HTML

引导
材料设计软件
骨架

.nav-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
}