0

您可以在此屏幕截图中看到，每行包含“hi”的菜单在 body 元素下方以及屏幕上的按钮下方弹出。

突然出现

dom 结构如下所示：

dom结构

打开时下拉元素的计算样式为：

background-color: transparent;
color: #999;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: visible;
overflow-y: visible;
position: relative;
width: 1425px;

这是弹出“超过”下拉菜单的计算样式的项目之一：

box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
height: 22px;
line-height: 17px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
overflow-x: visible;
overflow-y: visible;
vertical-align: middle;
width: 74px;
word-spacing: 0px;

我似乎无法使用正确的 dom 和 css 魔法来使这项工作正常进行。在下拉 div 的导航栏中，我一直在玩 dom 层次结构中的位置。我也在下拉菜单、下拉菜单和弹出的元素上使用 z-index。

我觉得有点像我在这里没有看到的一些基本的东西。有什么想法吗？

4

7 回答 7

6

我遇到了类似的问题。我可以通过从 nav-collapse 元素中删除 'collapse' 类来修复它。

我并没有真正深入研究这个问题，但这为我解决了问题。

于 2012-10-17T03:15:30.593 回答
4

想通了，问题是我在导航栏上有一个 transform3d：

-webkit-transform: translate3d(0, 0, 0);

删除它修复了它。我注意到当我删除 translate3d 时，导航栏的计算样式会导致 z-index 从 0 变为 auto。

不确定这是否是预期行为？

希望这对其他人有所帮助。

于 2012-09-29T14:56:37.290 回答
2

这是一个 z-index 问题。

确保导航栏高于其他元素。

于 2012-09-29T14:49:02.740 回答
2

我发现我的类似问题是由于父元素的不透明度设置为低于 1。

于 2014-11-14T21:15:16.370 回答
1

将css添加到父元素

overflow:visible;
于 2015-01-29T10:49:57.373 回答
0

使用此处发布的答案，我执行了以下操作....在我的 _Layout.cshtml 上，我添加了

style="位置：相对；z-index：999；" 到我的容器主体内容 div（就在 RenderBody() 之前），所以它看起来像这样：

<div class="container body-content" style="position: relative; z-index: 999; ">
        @RenderBody()
于 2016-07-22T03:57:09.870 回答
0

诚然，正如 arnirpc 提出的

-webkit-transform: translate3d(0, 0, 0);

这麻烦。但是我不得不使用它，因为 Bootstrap Dynamic Pills 和 Tabs 也带有下拉菜单。在这里看到：带有下拉菜单的药丸

因此，删除翻译会将下拉框移动到 Dropdown 按钮上方 - 这就是您不想要的。

但默认情况下，Bootstrap 4 药丸的下拉菜单甚至不起作用，因为下拉菜单隐藏在 TAB 内容后面，无论它是 H1、文本还是图像都无关紧要。

所以我在 LI、UL、容器等的许多内容上尝试了 z-index 的东西。什么都没有。

我的解决方案： 在这种情况下，它只是在内部内容上放置一个 z-index-minus-1（或任何具有 z-index：-1 的类）。

<div class="tab-content" id="pills-tabContent">
        <div class="tab-pane p-3 fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

            <div class="row">
                <div class="col-sm-4 z-index-minus-1"> <!-- HERE -->
于 2020-01-25T09:27:03.247 回答