Question

结构和所有内容都在这里：

.wrapper{
  position: relative;
  z-index: 0;
}

.map{
  position: relative;
  width:300px;
  height:300px;
  background-color: orange;
  z-index: -1;
}

.marker {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 3;
  cursor: pointer;
}

.marker :hover{
  cursor: pointer;
}

.description {
  position: absolute;
  top: 75px;
  width: 150px;
  height:150px;
  background-color: black;
  opacity: 0.5;
  z-index: 2;
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="map">
        <div class="marker"></div>        
      </div>
      <div class="description"></div>
    </div>
  </body>
</html>

并链接到plunkr： https://next.plnkr.co/edit/cfBk4SPfuPZIaJFK

说明必须在地图div之外，我想将说明放在标记下，但是我无法使用绝对位置和z索引来完成说明。有任何想法吗？

更改容器外部div的位置以将其悬停在容器中div下方

0 个答案: