css - Prevent an Image from overlapping a div

Question

I have an image on the page and when the user hover over it i'm showing a div with some info. But the image is getting overlapped with the div. Seems like a z-index issue but I couldn't fix it.

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 Fiddle: https://jsfiddle.net/qub0ny5k/

Answer 1

your .search does not needs a z-index .
Also don't wrap div into span . Use div instead.

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

Answer 2

I gave the .tip this:

overflow:hidden;
z-index:2;

and I removed the z-index on .search it works now