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索引。現在一切都好。