如何解决 z-index 和 overflow:scroll 的问题

Question

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

我得到了 select 和模态组件。当我单击 select 时，它会在模态组件内展开并创建滚动条。

我想做成下图中的样子。在模态上显示 select。我通过从模态组件中删除 overflow:scroll 来实现它。但是我需要离开 overflow:scroll 以防模态变大。我认为 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

如果您的 "Select" 标签出现在模式的末尾，那么您可以这样做：

Class .modal-block 删除 overflow-y:scroll;

Class .modal-body 添加 overflow-y:scroll;

像这样将 .select-wrapper 从 .modal-body 中移出

<div class="modal-block">Content</div>
<div class="select-wrapper">SELECT OPTION</div>

Answer 2

在 .modal-wrapper 中添加 overflow-y:scroll; 并从 .modal-block 中删除 overflow-y: scroll; 和 max-height: 300px;。检查沙箱 link Sandbox example

Answer 3

只是不同意见，我认为我们可以将 scroll 效果应用于文本段落而不是整个模式块。这样，您就可以方便地根据需要设置整个模态块及其子文本段落的高度。

Link: https://codesandbox.io/s/suspicious-curran-pzq5j

如何解决 z-index 和 overflow:scroll 的问题

How to fix problem with z-index and overflow:scroll

html

javascript

css

z-index

reactjs