css透明元素如何遮挡住fixed元素

clipboard.png

如图,导航栏是透明的元素,这个列表position设置成了fixed,脱离了文档流。

层级关系:导航栏的层级高于列表的层级。

如何让这个列表被导航栏遮住?除了下面这种改成纯色的方案,还有什么思路吗?

clipboard.png

------------------还是贴一下代码吧----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background: rgb(16, 137, 62);
        }

        nav {
            width: 100%;
            height: 40px;
            padding: 5px;
            position: relative;
            background: rgba(0, 0, 0, .15);
            z-index: 1;
        }

        ul {
            color: #fff;
            width: 120px;
            background: rgba(0, 0, 0, .1);
            padding: 4px 0;
            position: fixed;
            top: 6px;
            left: 120px;
            z-index: 0;
        }

        ul li {
            list-style: none;
            text-align: center;
            margin: 8px 0;
        }
    </style>
</head>
<body>

<nav></nav>
<ul>
    <li>测试项目1</li>
    <li>测试项目2</li>
    <li>测试项目3</li>
    <li>测试项目4</li>
    <li>测试项目5</li>
</ul>

</body>


</html>

效果:

clipboard.png

--------补充GIF,类似这样的效果,不过它的导航栏是纯色的,所以没什么问题------------------

clipboard.png

阅读 2.7k
评论
    3 个回答
    • 1.4k

    nav写多一层,一个div颜色跟body bg一样,另一哥div用来写黑色透明,两个叠在一起。

      ul {
        color: #fff;
        width: 120px;
        background: rgba(0, 0, 0, 0.1);
        padding: 4px 0;
        position: fixed;
        /* 这里top改一下 */
        top: 45px;
        left: 120px;
        z-index: 0;
      }

        @liny 这种方案不错,确实可行,改了一下代码

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                body {
                    background: rgb(16, 137, 62);
                }
        
                nav {
                    width: 100%;
                    height: 40px;
                    padding: 5px;
                    position: relative;
                    background: rgb(16, 137, 62);
                    z-index: 1;
                }
        
                nav div {
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, .15);
                }
        
                ul {
                    color: #fff;
                    width: 120px;
                    background: rgba(0, 0, 0, .1);
                    padding: 4px 0;
                    position: fixed;
                    top: 6px;
                    left: 120px;
                    z-index: 0;
                }
        
                ul li {
                    list-style: none;
                    text-align: center;
                    margin: 8px 0;
                }
            </style>
        </head>
        <body>
        
        <nav>
            <div></div>
        </nav>
        <ul>
            <li>测试项目1</li>
            <li>测试项目2</li>
            <li>测试项目3</li>
            <li>测试项目4</li>
            <li>测试项目5</li>
        </ul>
        
        </body>
        
        
        </html>
        

        clipboard.png

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章