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-index 没有正确定义。现在一切正常。

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

Popover in AngularJS and relative position in the form

css

angularjs

css-position

popover