Popover in AngularJS and relative position in the form - css

Question

I implement a form with AngularJS (for adding a contact).
This form contains several fields.
The first field is a text for the LastName. When a text is entered the system checks in the database if the value already exists. If the value exists the system displays an error message with the different contacts with the same lastName:
I created a popover in order displays contact details with the event mouseover. I have problem for displaying the popover in the page.
The popover should be displayed in front of the next fields. But I don't know how to do that (even with the relative position).
Here my HTML code:
<div ng-show="ContactForm.username.$dirty && alreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px; position:relative">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Last Name already exists:
<ul id="contacts_list">
<li ng-repeat=" cont in contacts" style="position:relative">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
{{ cont.lastname }} {{ cont.firsttname }}
</div>
</li>
</ul>
</div>
And the CSS:
.angular-popover-container {
position: absolute;
width: 0;
height: 0;
left: 0
}
.angular-popover {
position: absolute;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2);
background-color: #fff
}
.angular-popover-template {
padding: 10px;
}
.popover-floating-animation-top {
animation: floatingtop 3s .5s infinite;
-webkit-animation: floatingtop 3s .5s infinite
}
.popover-floating-animation-bottom {
animation: floatingbottom 3s .5s infinite;
-webkit-animation: floatingbottom 3s .5s infinite
}
.popover-floating-animation-left {
animation: floatingleft 3s .5s infinite;
-webkit-animation: floatingleft 3s .5s infinite
}
.popover-floating-animation-right {
animation: floatingright 3s .5s infinite;
-webkit-animation: floatingright 3s .5s infinite
}
#-webkit-keyframes floatingtop {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, -8px);
-webkit-transform: translate(0, -8px)
}
}
#-webkit-keyframes floatingbottom {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, 8px);
-webkit-transform: translate(0, 8px)
}
}
#-webkit-keyframes floatingright {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(8px, 0);
-webkit-transform: translate(8px, 0)
}
}
#-webkit-keyframes floatingleft {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(-8px, 0);
-webkit-transform: translate(-8px, 0)
}
}
.hide-popover-element {
display: none
}
.angular-popover-triangle {
width: 30px;
height: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 6px 10px -17px rgba(0, 0, 0, .2)
}
.angular-popover-triangle:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #fff;
transform: rotate(45deg);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2)
}
.angular-popover-triangle-top:after {
top: -8.5px;
left: 7px
}
.angular-popover-triangle-bottom:after {
top: 23.5px;
left: 7px
}
.angular-popover-triangle-right::after {
top: 7.5px;
left: 23.5px
}
.angular-popover-triangle-left::after {
top: 7.5px;
left: -8.5px
}
ul#contacts_list {
width: 200px;
margin-top:20px;
}
ul#contacts_list li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
Could you please help me to solve that?
Regards

Answer 1

The problem was due to the parameter z-index not correctly defined. All is ok now.