CSS调整HTML导航栏居左logo居右后导航链接无法点击问题

问题原因 #

修改浮动后导航链接点击失效的核心原因有两个：

1. 父容器.wrapper没有做浮动清除，内部logo和导航设置浮动后父容器高度塌陷，无法正常撑开占据头部上层空间
2. 后续的.welcome-text是绝对定位元素，在HTML结构中排在导航容器之后，默认层级更高，直接覆盖在了导航区域上方，点击导航时实际触发的是welcome-text的透明区域，自然无法跳转。

解决步骤 #

1. 给父容器添加清除浮动样式 #

给.wrapper新增overflow: hidden属性即可快速实现浮动清除，避免高度塌陷。

2. 调整对应浮动属性 #

按需求把.nav-area的float属性改为left，.logo img的float属性改为right。

3. 提高导航区域层级 #

给.nav-area新增position: relative和z-index: 10属性，让导航区域始终浮在头部最上层，不会被其他元素遮挡。

修改后的完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15pt;
}

.wrapper {
  width: 1170px;
  margin: auto;
  overflow: hidden; /* 新增：清除内部浮动 */
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/fikri-nyzar-AzQ0G1hJizk-unsplash.jpg);
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav-area {
  float: left; /* 按需求改为左浮动 */
  list-style: none;
  margin-top: 30px;
  position: relative; /* 新增：配合z-index生效 */
  z-index: 10; /* 新增：提高层级避免被覆盖 */
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px 0%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
}

.nav-area li:hover {
  background: rgb(139, 139, 139);
  color: #333;
}

.logo img {
  width: 100px;
  float: right; /* 按需求改为右浮动 */
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 600px;
  height: 300px;
  padding: 13% 10%;
  text-align: center;
}

.welcome-text h1 {
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.welcome-text a {
  border: 1px solid #fff;
  padding: 10px 25px 0%;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
  color: #fff;
}

.welcome-text a:hover {
  background: #fff;
  color: #333;
}

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/rame.png');
  background-position: center top;
  height: 350px;
}

修改完成后刷新页面，即可同时实现左导航、右logo的布局效果，且导航链接可以正常点击跳转。

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