AngularJS中的弹出窗口和窗体中的相对位置

Question

我使用AngularJS实现窗体（用于添加联系人）。

此表格包含几个字段。

第一个字段是的文本姓氏。当输入文本时，系统检查数据库中的值是否已经存在。如果该值在系统中存在显示错误消息与具有相同lastName的不同的联系人：

我创建了一个酥料饼，以便显示与该事件鼠标悬停联系人详细信息。我在显示页面中的弹出窗口时遇到问题。 弹出窗口应显示在下一个字段的前面。但我不知道该怎么做（即使是相对位置）。

这里我的HTML代码：

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

而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; 
} 

能否请你帮我解决吗？

问候

Answer 1

的问题是由于不正确地定义的参数z索引。现在一切都好。