右侧滚动列表覆盖Navbar问题求助（附完整代码）

算力阿峰

2026-5-15

我看了你的代码，问题主要出在Navbar的层级设置和部分元素的定位冲突上，下面是具体的修复方案：

问题根源

你的Navbar使用了position: absolute，但没有设置z-index，导致滚动的列表内容层级比它高，从而覆盖Navbar
右侧栏的.tab用了position: fixed，脱离了父容器的限制，进一步加剧了重叠问题
主体容器#container没有避开Navbar的高度，导致内容从页面顶部开始，和Navbar重叠

修复步骤

给Navbar添加z-index: 100，确保它始终在最上层
给#container设置margin-top: 26px（Navbar高度20px + 底部边框6px），让主体内容从Navbar下方开始
移除.tab的position: fixed，改为相对定位，让它受父容器约束
调整.tabcontent的margin，确保内容和tab按钮正确对齐

修改后的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- View meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> DEMO </title>
    <!-- Color CSS Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <script src="https://use.fontawesome.com/f87c84f770.js"></script>
    <style type="text/css">
        body, html, .sidebar, .centerPanel, .rhsbar1{
            height: 88%;
            margin: 0; /* 移除默认margin，避免布局偏移 */
            padding: 0; /* 移除默认padding */
        }
        #container{
            width:100%;
            height:100%;
            margin-top: 26px; /* 避开Navbar的高度（20px + 6px边框） */
        }
        .sidebar{
            width:25%;
            float:left;
            height:100%;
            border-right: solid 6px #f1ded9;
            overflow-y: auto;
        }
        .centerPanel {
            background-color: white;
            float:left;
            width:50%;
            height:100%;
        }
        .rhsbar1{
            background-color: white;
            float:right;
            width:25%;
            height:100%;
            border-left: solid 6px #f1ded9;
            overflow-y: auto;
            position: relative; /* 确保子元素相对它定位 */
        }
        .navbar {
            height: 20px;
            position: absolute;
            background-color: black;
            width:100%;
            border-bottom: solid 6px #f1ded9;
            z-index: 100; /* 提高层级，避免被覆盖 */
            top: 0; /* 固定在顶部 */
        }
        #loaded_img_panel {
            display:block;
            height: 200px;
            position: relative;
            background-color: white;
            overflow: auto;
            white-space: nowrap;
            border-top: solid 6px #f1ded9;
            margin-top: 0; /* 确保和主体容器衔接 */
        }
        .rhsbar1 .tab {
            overflow-y: auto;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            margin: 10px 0 0 0; /* 调整margin，避免和Navbar重叠 */
            position: relative; /* 移除fixed，改为相对定位 */
        }
        /* Style the buttons inside the tab */
        .rhsbar1 .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 5px 5px;
            transition: 0.3s;
            font-size: 12px;
        }
        /* Change background color of buttons on hover */
        .rhsbar1 .tab button:hover {
            background-color: #ddd;
        }
        /* Create an active/current tablink class */
        .rhsbar1 .tab button.active {
            background-color: #ccc;
        }
        /* Style the tab content */
        .rhsbar1 .tabcontent {
            display: none;
            padding: 6px 12px;
            border-top: none;
            margin: 0; /* 调整margin，和tab正确对齐 */
        }
    </style>
</head>
<body>
    <div class="navbar">
    </div>
    <div id="container">
        <div class="sidebar">
        </div>
        <div class="centerPanel">
        </div>
        <div class="rhsbar1">
            <div class="tab">
                <button class="tablinks" onclick="openActivity(event, 'annotateDirectories')" >Annotate</button>
            </div>
            <div id="annotateDirectories" class="tabcontent">
                <ul>
                    <li>Test</li>
                    <li>Test</li>
                    <li>Test</li>
                    <li>Test</li>
                    <li>Test</li>
                    <li><ul>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                    </ul></li>
                    <li>Test</li>
                    <li>Test</li>
                    <li><ul>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                    </ul></li>
                    <li>Test</li>
                    <li>Test</li>
                    <li>Test</li>
                    <li>Test</li>
                    <li>Test</li>
                    <li><ul>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                    </ul></li>
                    <li>Test</li>
                    <li>Test</li>
                    <li><ul>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                        <li>TestMessage</li>
                    </ul></li>
                </ul>
            </div>
            <script>
                function openActivity(evt, activeWin) {
                    var i, tabcontent, tablinks;
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                        tabcontent[i].style.display = "none";
                    }
                    tablinks = document.getElementsByClassName("tablinks");
                    for (i = 0; i < tablinks.length; i++) {
                        tablinks[i].className = tablinks[i].className.replace(" active", "");
                    }
                    document.getElementById(activeWin).style.display = "block";
                    evt.currentTarget.className += " active";
                }
            </script>
        </div>
    </div>
    <div id="loaded_img_panel" name="loaded_img_panel" >
    </div>
</body>
</html>

关键修改说明

Navbar的z-index: 100：确保Navbar始终在所有内容之上，不会被滚动的列表覆盖
#container的margin-top: 26px：让主体内容从Navbar下方开始，避免初始布局就重叠
移除.tab的position: fixed：让tab按钮处于右侧栏的文档流中，跟随右侧栏一起滚动，不会脱离约束
调整.tab和.tabcontent的margin：让内容排版更合理，避免不必要的间距

这样修改后，右侧栏的列表滚动时就不会覆盖Navbar了，同时整体布局也保持了你需要的Navbar+三栏主体+底部通栏结构。

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

右侧滚动列表覆盖Navbar问题求助（附完整代码）

问题根源 #

修复步骤 #

修改后的完整代码 #

关键修改说明 #

问题根源

修复步骤

修改后的完整代码

关键修改说明