div弹出层被遮挡的问题

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

html代码如下：

css如下：

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

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

css3 htm

阅读 8.6k

2 个回答

某熊猫桑

✓ 已被采纳

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

小翼

5.9k3627

发布于
2018-01-18

关键的子级的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>

在线调试

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

div弹出层被遮挡的问题

你尚未登录，登录后可以

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

怎么用css 实现这个形状？

使用transform: scaleX 会造成几个相连的子元素看起来是分隔的？

less中在calc使用变量报错是哪里需要配置还是写法不对？

CSS实现背景图根据显示窗口等比缩放？