div弹出层被遮挡的问题

tcsecchen
  • 29

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

clipboard.png

html代码如下:

clipboard.png

css如下:

clipboard.png

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

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

回复
阅读 5.7k
2 个回答
某熊猫桑
  • 16.1k
✓ 已被采纳
  1. DOM的自然层级,子级高于父级,页面上排列靠下的高于在上边的。所以,想要弹框层级最高,直接放最下边就好。
  2. z-index的影响范围仅限同级元素,并不是页面全局的层级。

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

在线调试

宣传栏