Css 自定义下拉Z索引问题

我在模态对话框上有一个引导下拉列表。 单击下拉按钮后，表单下会出现下拉菜单。 有没有办法解决这个问题，但不使用“position:fixed”，因为通过使用fixed属性，我面临着其他问题

<div id="dialog" title="Basic dialog" ng-show='showDialog'>
    <div class="container">
       <h2>Dropdown</h2>
       <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
             <li><a href="#">AAAAAA</a></li>
             <li><a href="#">BBBBBB</a></li>
             <li><a href="#">CCCCCC</a></li>
             <li><a href="#">DDDDDD</a></li>
             <li><a href="#">EEEEEE</a></li>
             <li><a href="#">FFFFFF</a></li>
          </ul>
       </div>
    </div>
</div>

下拉列表
下拉示例

---

问题在于，对话框（它是一个div）有效地“包含”了下拉列表及其所有内容，因此DrowDown堆叠上下文被替代到它

您可以添加此css规则来解决您的问题，但请谨慎使用，以免在应用程序的其他对话框中产生任何副作用：

<style>
  .ui-dialog, #dialog, #container { overflow:visible; }
</style>

.ui对话框，#对话框，#容器{溢出：可见；}

---

你也有一篇很好的文章解释了堆叠上下文，因为Z-Index不是大多数人认为的…

谢谢你的回答。在这种情况下，它是工作，一切都很好，我正在和其他开发人员一起做一个大项目，我必须通过angularjs创建自定义下拉列表，这个下拉列表不会对其他表单产生任何副作用。我应该在指令中解决这个问题，而不涉及任何外部样式。有可能吗？我不使用Bootstrap或jQueryMobile来处理这类事情，它们创建DOM元素，并以一种非常时髦的方式将它们四处移动……如果你可以将你的ng controller=“AccordionDemoCtrl”属性设置为html标记，那么你的body标记对于你应用程序中的每个视图都是“不同”的。这样就有机会用id或类来标记它，然后您可以使css规则更加具体，例如，对于一个特定的body标记内的对话框：#theBody.ui dialog{…}但是为什么标准选择元素不会在html上产生任何堆叠上下文问题呢？我的意思是，我可以将标准选择下拉列表放在我想要的任何地方，而不必面对这种堆叠问题。在我的自定义下拉列表上没有办法产生这种行为？再次感谢你的回答