Navbar列表项与Header冲突，Gallery和About无法正常点击

问题根源在于header内的logo容器使用了绝对定位，导致元素区域覆盖在导航栏中间选项之上，挡住了点击事件；同时你的HTML结构不符合规范，<header>标签应当放在<body>内部而非外部。

解决方案步骤 #

• 将<header>迁移至<body>内部，符合HTML标准结构
• 移除logo_container的position:absolute和float:right属性，改用flex布局实现logo居中，避免元素脱离文档流造成遮挡
• 优化header布局逻辑，让内部元素正常排列

修改后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <!--writting font title-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Whisper&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>

  <body>
    <header>
      <div class="header">
        <div class="inner_header">
          <div class="logo_container">
            <h1>Céramique & Porcelaine</h1> 
          </div> 
        </div>      
      </div>
    </header>

    <div class="menu_navbar">
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>    
    </div>
  </body>
</html>

修改后的CSS代码 #

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

body{
    background-color: #101010;
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}

.header{
   width: 100%;
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #101010;
}

.inner_header{
    width: 1000px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
}

.logo_container{
    display: flex;
    align-items: center;
}

.logo_container h1{
    color: bisque;
    font-family: "Whisper", cursive;
    font-weight: 400;
    font-style: normal;
}

.menu_navbar{
    background: blue;
    text-align: center;
}

.menu_navbar ul{
    display: inline-flex;
    list-style: none;
    color: bisque;
    text-align: center;
}

.menu_navbar ul li {
    width: 120px;
    margin: 15px;
    padding: 15px;
    /* 可选：添加hover效果提升交互体验 */
    transition: background-color 0.3s;
}

.menu_navbar ul li:hover{
    background-color: darkblue;
    border-radius: 3px;
}

.menu_navbar ul li a{
    text-decoration: none;
    color: bisque;
}

内容的提问来源于stack exchange，提问作者mosaiic