试图将我的标题贴在页面顶部

Question

我的标题卡住了。我希望我的导航栏显示在我的标题图像上，但我不明白为什么，但标题图像和页面本身顶部之间存在间隙。

这是现在的样子（导航栏有透明背景）：

这就是我想要实现的目标：

我相信问题可能来自我在 html 和 body 上设置的属性，但我不太确定。

这是我的代码和 CSS

html{
    height: 100vh;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
body {
    box-sizing:border-box;
    display:block;
    margin: 0 auto;
    padding: 0;
    min-height: 100%;
    background-color: transparent;
  font-family: 'Montserrat';
    }

/* NAV BAR */

.main-head {

    box-sizing:border-box;
    padding:0;
    margin:0;
    position:sticky;
    top:0;
    background:transparent !important;

}
.main-head nav a {
    color:black;
    font-size:1rem;
    text-transform:uppercase;
    text-decoration:none;
}
.main-head nav ul{
    list-style-type:none;
    display:flex;
    flex: 3 1 40rem;
    justify-content:space-around;
    align-items:center;
}
.main-head nav {
    min-height:10vh;
    display:flex;
    align-items:center;
    width:90%;
    margin:auto;
    padding:0.5rem;
    
}
/* HEADER IMAGE */

.bonjour {
    height:100vh;
    width:100%;
    background:url("images/banniere_french1.png");
    background-size:cover;
    background-position:bottom center;
    
}

<header class="main-head">
   <title><?php echo $title; ?></title> 
    <nav>
    <a href="<?php echo '?page=home&css='.$css ?>"><img src="images/mona.png" class="logo"/></a>
    
        
        <ul>
            
         <li><?php echo '<a href="?page=Images de fond&css='.$css.'&titre=Images de fond"></a>' ?>
           <?php echo '<a href="?page=Images de fond&css='.$css.'">Images de fond</a>' ?></li>
           
        <li><?php echo '<a href="?page=Le colonnage&css='.$css.'&titre=colonnage"></a>' ?>
         <?php echo '<a href="?page=Le colonnage&css='.$css.'">colonnage</a>' ?></li>
         
        <li><?php echo '<a href="?page=Filtres&css='.$css.'&titre=Filtres"></a>' ?>
         <?php echo '<a href="?page=Filtres&css='.$css.'">Filtres</a>' ?></li>
         
        <li><?php echo '<a href="?page=liens&css='.$css.'&titre=Liens"></a>' ?>
        <?php echo '<a href="?page=liens&css='.$css.'">Liens</a>' ?></li>
        
        </ul>
    </nav>

</header>
<section class="bonjour">
</section>

Answer 1

在您的 CSS 中，删除：

body {
  display: block;
}

并添加：

body {
  position: relative;
}

Answer 2

尝试在 main-head 类中替换 position: sticky 每 position: absolute 并添加 width: 100%