I created a user hovercard but i have z-index problem.
If you can check this demo then you can see there are tree avatar = DEMO
So hover over any image then hovercar will open but Hovercard is far below the picture below. How can i fix it anyone can help me here ?
<div class="the-container">
<div class="summary-mask"></div>
<div class="summary" data-id="50"> <a href="http://kraigo.tumblr.com/" class="profile-ava"></a>
<div class="user-container"></div>
</div>
</div>
CSS
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 1;
}
.loaded .summary-mask {
z-index: -1;
}
.profile-ava {
width: 50px;
height: 50px;
background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
border-radius: 3px;
background-size: 50px 50px;
display: block;
}
.summary a:hover:before {
content:'';
position: absolute;
display: block;
bottom: -10px;
left: 0;
height: 10px;
width: 100%;
z-index: 2;
}
.p-tooltip {
position: absolute;
margin-top: 10px;
top: 100%;
left: 50%;
margin-left: -140px;
width: 280px;
max-height: 120px;
border-radius: 5px;
overflow: hidden;
background-color: #F0F0F0;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
This should work:
http://jsfiddle.net/sw4ev8b4/14/
Remove all the fancy z-index styling you have in there and just add a positive z-index z-index:999;
to your tooltip:
.summary {
margin: -50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.p-tooltip {
position: absolute;
margin-top: 10px;
top: 100%;
left: 50%;
margin-left: -140px;
width: 280px;
max-height: 120px;
border-radius: 5px;
overflow: hidden;
background-color: #F0F0F0;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
z-index:999;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.