HTML/CSS技术问题：导航栏被背景图片遮挡无法显示

问题根源 #

1. CSS选择器与HTML元素不匹配：你写的.bg img选择器，对应不上HTML里的<div class="bg-img"></div>元素，导致背景样式没正确应用到目标容器，反而之前的全局div样式（你提到的带background-image的那行）会覆盖所有div，包括导航栏所在容器，造成遮挡。
2. 导航栏容器层级不足：.container是绝对定位，但没设置z-index，和同样是绝对定位的背景元素相比，层级优先级不够，所以被背景图盖住。

修复步骤 #

1. 修正CSS选择器：把.bg img改成.bg-img，匹配HTML里的背景容器类名。
2. 给导航栏容器加更高层级：给.container设置z-index: 10（数值只要比背景元素默认的0高就行），确保它在背景图上方显示。
3. 删除全局div样式：那个全局div {background-image...}会影响所有div元素，必须删掉，改用类选择器精准控制背景元素。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>
    h1 {
        color: orangered;
        text-align: center;
        font-family: Arial;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .bg-container {
        position: relative;
        width: 100%;
        height: 380px;  
    }
    
    /* 修正选择器，匹配HTML的背景容器 */
    .bg-img {
        background-image: url('./images/castle.png');
        min-height: 380px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
   
    .container {
        position: absolute;
        margin: 20px;
        width: auto;
        /* 设置更高层级，确保导航栏在背景上方 */
        z-index: 10;
    }
   
    .topnav {
        overflow: hidden;
        background-color: #333;
        position: relative;
    }
   
    .topnav a {
        float: left;
        color: crimson;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
</style>
</head>
<body>
    <div class="bg-container">
        <div class="bg-img"></div>
    </div>
    <div class="container">
        <h1>Welcome to my page</h1>
        <div class="topnav">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>
</body>
</html>

额外提示 #

• z-index只对设置了position: absolute/relative/fixed/sticky的元素生效，所以要确保导航栏和背景元素都有定位属性。
• 尽量避免使用全局标签样式（比如直接给div写样式），容易引发布局冲突，优先用类选择器控制特定元素。

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