我给外面的div overflow scoll 可是里面的下拉框被遮住了 有什么办法吗

Question

我给外面的div overflow scoll 可是里面的下拉框被遮住了，我图中红框是他实际大小，但是现在被最外层的div 遮住了一部分。这个下拉框是自己写的 不是用原生的select

Answer 1

你换下思维，下拉框就一定要下拉么？ 不能上拉么？？？？

你根据当前元素距离下边距的位置来判断，是否有足够的空间来下拉，不能就上拉。

Answer 2

被遮住了？从你的截图是可以看到的。
可以看到，但是点击不到，可能是定位的层太低了，你可以调高点z-index的值

Answer 3

你的select是属于外层父级的，父级多高、他就不会超出这个高度。
因此，让这个select下拉框的定位脱离文档流、用绝对定位、z-index设一下

Answer 4

把列表框的高度设大一些，预留足够的下拉框位置。

Answer 5

可以根据计算高度 ，使下拉框在高度不足情况下 向上展开

Answer 6

我在外部写了个ul，然后根据点击那个下拉框，将外部写的ul定位到他的下面。这样就不会受overflow scoll影响了。还有就是上面一些答案说zindex给最高这个方法应该是不行的，我试过了。谢谢大家的回答

Answer 7

overflow
将创建一个新的 块级格式化上下文.

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

可以通过用一个能创建块状格式化上下文的属性,脱离原来的文档上下文,从而就不会被遮挡了
比如:

• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display 为 table、`table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table`）
• overflow 值不为 visible 的块元素
• display 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。