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

szqfcxe2 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(93)

我试图设计一个模态与背景使用顺风。然而，我遇到了一个问题，如果我的模态变得更大，上半部分被切断，我不能滚动到它，但我可以接近尾声。
这里有一个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;“没有成功。

css

来源：https://stackoverflow.com/questions/76834220/modal-float-out-the-backdrop-without-scrollbar

1条答案

按热度按时间

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值

赞(0）回复(0）举报 2023-08-09

我来回答

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

1条答案

相关问题

热门标签

最新问答