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

div弹出层被遮挡的问题

发布于 2022-09-06 11:22:08 字数 712 浏览 31 评论 0

1.我想做一个鼠标移入后，弹出新div浮在父级div之上的效果，但是加了弹出层之后，弹出层会被父级div的同级div所覆盖遮挡（z-index有设置），如图所示：

html代码如下：

css如下：

不太清除为什么会这样，待大佬解答，谢谢！！

jsbin地址：
http://jsbin.com/boponiq/edit...

收藏 0

分享到微博

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

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

发布评论

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

评论（2）

北渚 2022-09-13 11:22:08

DOM的自然层级，子级高于父级，页面上排列靠下的高于在上边的。所以，想要弹框层级最高，直接放最下边就好。
z-index的影响范围仅限同级元素，并不是页面全局的层级。

寒尘 2022-09-13 11:22:08

关键的子级的css都没有贴出来，哪里能看得出问题.
别外，这个富文本编辑器可以支持code的，请不将代码以图的形式发了。
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Div test</title>
  <style>
    .parent {
      width: 200px;
      height: 200px;
      position: relative;
      background: #0e77ca;
      display: flex;
      justify-content: center;
    }

    .sub {
      width: 50px;
      height: 400px;
      background: rgba(100, 100, 100, 0.5);
      position: absolute;
      display: none;
    }

    .parent:hover .sub {
      display: block;
    }
  </style>
</head>
<body>
<div class="parent">
  <div class="sub"></div>
</div>
</body>
</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

676 人气

关注发私信

相关话题

热门标签

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

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

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

原文