CSS定位（相对，相对里面的绝对）+重叠问题？

Question

遇到了问题

email : info@wereviewapp.com 
pass : xtyxty1

在名为 category 的第二个组合框中无法正确显示其下拉列表。

我已经解决了问题 :

.bootstrap-select .dropdown-menu {
  max-height: 192px !important;
  max-height: 19.2rem !important;
}
.bootstrap-select .dropdown-menu .inner {
  max-height: 140px !important;
  max-height: 14rem !important;
}

但是，还有什么好的方法吗？

我关心的是了解导致问题的原因。 为什么我需要添加最大高度？它应该像在 jsfiddle 中一样工作得很好。

相关内容都在同一水平，应该没有问题。相对容器内的任何绝对元素都应该增长并显示在底层 div 容器的顶部。

Answer 1

我认为你应该设置一个data-container，因为默认值似乎是body，而bootstrap-select通过javascript注入高度值。您可以在此处找到更多信息：

https://silviomoreto.github.io/bootstrap-select/examples/#container

您的主要容器是#wrap，因此您可以尝试将属性 data-container="#wrap" 添加到您的 select html 标签。

<select class="selectpicker" data-container="#wrap">
    ...
</select>

CSS定位（相对，相对里面的绝对）+重叠问题？

CSS positioning (relative, absolute inside relative) + overlapping issue?

html

css

css-position

bootstrap-select