在粘性组件上弹出

debugcn 发表于 Dev

拜达亚纳特

我有两个粘纸箱。将鼠标悬停在粘性框内的特定区域上时，将弹出一个弹出窗口。我希望这些弹出窗口始终显示在即时贴框的顶部。但是增加一个的z索引会隐藏另一个。有什么办法吗？

注-从盒子中去除粘性并保持两个盒子的z索引相同可以解决问题，但我需要盒子保持粘性。

.box {
  margin: 40px;
  padding: 20px;
  background: yellow;
  border: 1px solid red;
  position: sticky;
  
}

.innerBox {
  width: 100px;
  height: 50px;
  background: lightgreen;
  position: relative;
}

.popup1 {
  position: absolute;
  width: 50px;
  height: 150px;
  top: 25px;
  left: 35px;
  background: red;
  display: none;
}

.popup2 {
  position: absolute;
  width: 50px;
  height: 150px;
  bottom: 25px;
  left: 35px;
  background: black;
  display: none;
}

.box1:hover .popup1 {
  display: block;
}

.box2:hover .popup2 {
  display: block;
}

.boxUp {
  z-index: 3;
}

.boxDown {
  z-index: 3;
}

<div>
  <div class="box boxUp">
    <div class="innerBox box1">
      <p>
      Hover Here
      </p>
      <div class="popup1">
      </div>
    </div>
  </div>
  <div class="box boxDown">
    <div class="innerBox box2">
    <p>
    Hover Here
    </p>
      <div class="popup2">
      </div>
    </div>
  </div>
</div>

dgknca

将z-index鼠标悬停在.box

.box {
  margin: 40px;
  padding: 20px;
  background: yellow;
  border: 1px solid red;
  position: sticky;
  
}

.innerBox {
  width: 100px;
  height: 50px;
  background: lightgreen;
  position: relative;
}

.popup1 {
  position: absolute;
  width: 50px;
  height: 150px;
  top: 25px;
  left: 35px;
  background: red;
  display: none;
}

.popup2 {
  position: absolute;
  width: 50px;
  height: 150px;
  bottom: 25px;
  left: 35px;
  background: black;
  display: none;
}

.box1:hover .popup1 {
  display: block;
}

.box2:hover .popup2 {
  display: block;
}

.box:hover {
  z-index: 2;
}

<div>
  <div class="box boxUp">
    <div class="innerBox box1">
      <p>
      Hover Here
      </p>
      <div class="popup1">
      </div>
    </div>
  </div>
  <div class="box boxDown">
    <div class="innerBox box2">
    <p>
    Hover Here
    </p>
      <div class="popup2">
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。