鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全/ div彈出層被遮擋的問題

div彈出層被遮擋的問題

1.我想做一個(gè)鼠標(biāo)移入后，彈出新div浮在父級(jí)div之上的效果，但是加了彈出層之后，彈出層會(huì)被父級(jí)div的同級(jí)div所覆蓋遮擋（z-index有設(shè)置），如圖所示：

clipboard.png

html代碼如下：

clipboard.png

css如下：

clipboard.png

不太清除為什么會(huì)這樣，待大佬解答，謝謝?。?/p>

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

回答
編輯回答
眼雜
  1. DOM的自然層級(jí)，子級(jí)高于父級(jí)，頁(yè)面上排列靠下的高于在上邊的。所以，想要彈框?qū)蛹?jí)最高，直接放最下邊就好。
  2. z-index的影響范圍僅限同級(jí)元素，并不是頁(yè)面全局的層級(jí)。
2018年7月6日 03:15
編輯回答
安淺陌

關(guān)鍵的子級(jí)的css都沒有貼出來，哪里能看得出問題.
別外，這個(gè)富文本編輯器可以支持code的，請(qǐng)不將代碼以圖的形式發(fā)了。
上代碼：

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

在線調(diào)試

2017年9月18日 23:39