jquery css zindex,jquery - CSS z-index not working - Stack Overflow

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 =

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 ?

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;

}