javascript - 如何解决 z-index 和溢出问题 :scroll

Question

沙箱中的代码:https://codesandbox.io/s/vibrant-microservice-4rplf

我有选择和模态组件。当我单击选择时，它会在模态组件内展开并创建滚动。

我想让它像下图所示。显示选择模式。我通过从模态组件中删除溢出:滚动来实现它。但我需要保留溢出:滚动以防模式变大。我认为 z-index 有问题。你能帮我解决这个问题吗？

.modal-block {
  overflow-y: scroll;
  width: 60% !important;
  max-height: 300px;
  margin-top: 100px;
  background: #fff;
  border-radius: 4px;
  z-index: 1111;
}


.select-wrapper {
  width: 100%;
  position: relative;
  z-index: 1600;
}

Answer 1

添加overflow-y:scroll;在.modal-wrapper并删除 overflow-y: scroll;和max-height: 300px;来自.modal-block 。查看沙盒链接 Sandbox example