css - 防止图像重叠div

我在页面上有图像，当用户将鼠标悬停在图像上时，我显示了一些信息。但图像与div重叠。看起来像一个Z索引问题，但我无法修复它。
css - 防止图像重叠div

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/

来源

2017-04-20 CodingFreak

https://jsfiddle.net/qub0ny5k/1 / –

您.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>

来源

2017-04-20 19:30:19

我给.tip这样的：

overflow:hidden; 
z-index:2;

和我.search删除z-index现在的工作

来源

2017-04-20 19:32:21

css - 防止图像重叠div

回答

相关问题