css - 防止图像与 div 重叠

Posted 2023-02-22

【中文标题】css - 防止图像与 div 重叠

【英文标题】：css - Prevent an Image from overlapping a div

【发布时间】：2017-09-17 14:27:02

【问题描述】：

我在页面上有一个图像，当用户将鼠标悬停在它上面时，我正在显示一个包含一些信息的 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/

【问题讨论】：

jsfiddle.net/qub0ny5k/1

【参考方案1】：

我给.tip这个：

overflow:hidden;
z-index:2;

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

【参考方案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>