时间戳

首页 > 解决方案 > Bootstarp 5 - 相对于父级的全屏模式

html - Bootstarp 5 - 相对于父级的全屏模式

问题描述

BootStrap 5

我正在使用这种布局：

<div class="row flex-nowrap">
  <div class="left">
     <!-- leftbar -->
  </div>

  <div class="main overflow-auto position-relative">
    <!-- main site content -->

     <div class="modal fade">
        <div class="modal-dialog modal-fullscreen">
          ...
        </div>
     </div>
  </div>
</div>

是main主要内容区域（可滚动）。

我正在尝试在 main 中使用全屏模式，但它不是相对于视口，而是应该相对于它的直接父级（即 main）。

.modalposition:fixed不会让这种情况发生的用途。所以我这样做了：

 <div class="modal fade position-absolute">
    <div class="modal-dialog modal-fullscreen">
       ...
     </div>
 </div>

但无济于事。它让它看起来很乱。有没有更清洁的方法来实现我想要实现的目标。

标签： htmlcsstwitter-bootstrap

解决方案

我真的不认为以下代码会比您的解决方案更干净，但以防万一。

它创建堆叠上下文的想法，这种方式Position: fixed与视口无关。一些属性创建了一个堆叠上下文（transform, ... 可能还有更多）。

换句话说transform: translateX(0)，你的div.main元素会让你的div.modal行为就像它有一个position: absolute.

编辑：有关创建堆叠上下文的属性的更多信息：哪些 CSS 属性创建堆叠上下文？

推荐阅读