当前位置：文江博客话题详情

CSS HTML 前端 fixed导航栏

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

发布于 2022-09-11 20:54:49 字数 1712 浏览 22 评论 0

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

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

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

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

<!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>

效果：

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

就是爱搞怪 2022-09-18 20:54:49

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

囚你心 2022-09-18 20:54:49

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;
}

淡淡的优雅 2022-09-18 20:54:49

@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>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文