AngularJS ui-select下拉菜单被div遮挡问题咨询

出现这种遮挡问题，核心原因是父元素的溢出限制或层级/定位冲突，以下是针对性解决方案：

1. 启用append-to-body属性（优先推荐） #

ui-select自带append-to-body属性，可将下拉选择框直接挂载到<body>标签下，完全脱离父元素的嵌套限制，从根源避免被父元素的overflow或层级遮挡。

修改后的代码示例：

<ui-select multiple autofocus="true" theme="bootstrap" style="width: 400px;" 
           ng-model="selectedAssignMembers" sortable="true" close-on-select="false"
           append-to-body="true">
  <ui-select-match placeholder="Select person...">
    <span>{{person.firstname}}</span>
  </ui-select-match>
  <ui-select-choices position="down" repeat="person in persons">
    <div ng-bind-html="person.firstname"></div>
    <small> email: {{person.email}} </small>
  </ui-select-choices>
</ui-select>

2. 检查并移除父元素的溢出限制 #

如果不能使用append-to-body，需逐层检查所有嵌套父元素的CSS属性，确保没有设置：

• overflow: hidden
• overflow-y: hidden
• overflow-x: hidden

将这些属性改为overflow: visible，避免下拉框被父元素截断。

3. 强制提升下拉框的层级 #

若遮挡是因为其他元素（如表单、div）的z-index更高，可通过CSS强制提升ui-select下拉容器的层级：

.ui-select-dropdown {
  z-index: 99999 !important;
}

注意：如果父元素设置了position: relative且指定了z-index，下拉框的层级会受限于父元素，此时优先使用方案1更稳妥。

4. 移除父元素的特殊定位属性 #

部分父元素的CSS属性（如transform、perspective、filter）会导致absolute定位的下拉框被限制在父元素范围内，检查并移除这些属性即可解决遮挡。

内容的提问来源于stack exchange，提问作者dev01