css - 防止图像与 div 重叠

Question

我在页面上有一个图像，当用户将鼠标悬停在它上面时，我正在显示一个包含一些信息的 div。但是图像与 div 重叠。似乎是 z-index 问题，但我无法修复它。

CSS：

.tip {
background-color: #ff6699;
background-repeat: no-repeat;
border-radius: 5px;
color: #ffffff;
left: 22px;
padding: 4px 10px;
position: absolute;
text-align: left;
top: -4px;
width: 250px;
display: none;
z-index: 3;
}


.search {
display: inline-block;
width: 17px;
height: 17px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAV1BMVEX///9RSjxWT0HZ2NVbVEdYUUT8+/ttZ1vj4uCwraZhW07h4N19d23Gw7/X1dJ3cWaLhn3MysZmYFTz8/KfnJSDfnTp6Oe4ta+qp6CTj4Z6dWpeV0tybGGWN64GAAAAi0lEQVQYlWWPURKDIAxEQwCRRMGCVsXe/5wVxFrH/UnmJbuZAOxq52VmuNR2mJV+TG5IfvJBK3eAGNC7Bpq+UxQLWdDwaR5L89FrtfdkStWbPS8Y0dwJV/J07cltad5TTY6ESe7XedXidSw7hZSGLqAQStZEL/IXRl8IpB2tA6n+UB1kxA+0wB0R8RezpwVsoS4HoQAAAABJRU5ErkJggg==);
position: absolute;
cursor: pointer;
z-index: 3;
}

.search:hover .tip {
    display:block;
}

HTML：

<div >
 Hello <span class="search"><div class="tip">
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis
 </div></span>
 </div>
 <div >
 Hello AGain <span class="search"><div class="tip ">
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis
 </div></span>
  </div>

JS 小提琴：https://jsfiddle.net/qub0ny5k/

Answer 1

我给.tip这个：

overflow:hidden;
z-index:2;

我删除了.search 上的z-index，它现在可以工作了

Answer 2

您的.search 不需要z-index。
也不要将div 包装成span。请改用div。

.search {
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAV1BMVEX///9RSjxWT0HZ2NVbVEdYUUT8+/ttZ1vj4uCwraZhW07h4N19d23Gw7/X1dJ3cWaLhn3MysZmYFTz8/KfnJSDfnTp6Oe4ta+qp6CTj4Z6dWpeV0tybGGWN64GAAAAi0lEQVQYlWWPURKDIAxEQwCRRMGCVsXe/5wVxFrH/UnmJbuZAOxq52VmuNR2mJV+TG5IfvJBK3eAGNC7Bpq+UxQLWdDwaR5L89FrtfdkStWbPS8Y0dwJV/J07cltad5TTY6ESe7XedXidSw7hZSGLqAQStZEL/IXRl8IpB2tA6n+UB1kxA+0wB0R8RezpwVsoS4HoQAAAABJRU5ErkJggg==);
  position: absolute;
  cursor: pointer;
  /* z-index: 3;   NOOOOOOOOOOOOOO */
}
.tip {
  background-color: #ff6699;
  background-repeat: no-repeat;
  border-radius: 5px;
  color: #ffffff;
  left: 22px;
  padding: 4px 10px;
  position: absolute;
  text-align: left;
  top: -4px;
  width: 250px;
  display: none;
  z-index: 3;
}
.search:hover .tip {
  display: block;
}

<div>
  Hello
  <div class="search">
    <div class="tip">
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
      enim ac dui. Donec non enim in turpis pulvinar facilisis
    </div>
  </div>
</div>

<div>
  Hello AGain
  <div class="search">
    <div class="tip ">
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
      enim ac dui. Donec non enim in turpis pulvinar facilisis
    </div>
  </div>
</div>