css 模态浮动的背景没有滚动条

szqfcxe2  于 2023-08-09  发布在  其他
关注(0)|答案(1)|浏览(92)

我试图设计一个模态与背景使用顺风。然而,我遇到了一个问题,如果我的模态变得更大,上半部分被切断,我不能滚动到它,但我可以接近尾声。
这里有一个Codepen example
我的示例代码:

<div
  class="z-[10000] fixed h-screen w-screen top-0 bg-black bg-opacity-50 flex justify-center items-center overflow-auto"
>
  <div class="bg-white overflow-auto w-[44rem] p-4 my-28">
    modal first<br>
    modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>

modal last<br>
    
  </div>
</div>

字符串
我试着给出情态动词的位置:粘性;顶部:0;“没有成功。

ctrmrzij

ctrmrzij1#

似乎父元素上的样式类太多了。
删除以下内容似乎可以解决此问题:

  • 第一个月
  • fixed
  • overflow-auto

最值得注意的是,似乎是items-center导致了这个问题,很可能样式是冲突的。
请参见下面的代码片段:

**注意:**使用全屏选项,因为SO的Snippet默认提供的窗口不够大。

<script src="https://cdn.tailwindcss.com"></script>

<div class="z-[10000] h-screen w-screen top-0 bg-black bg-opacity-50 flex justify-center">
  <div class="bg-white overflow-auto w-[44rem] p-4 my-28">
    modal first<br> modal
    <br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>modal<br>    modal last<br>

  </div>
</div>

字符串
我也会建议:
1.不使用z-index,而是重新排序HTML(请参阅here

1.降低z-index

相关问题