BootStrap 5
我正在使用這個布局：
<div class="row flex-nowrap"/span>>
<div class="left">/span>
<! -- leftbar -->
</div>/span>
<div class="main overflow-auto position-relative"/span>>
<!--主站點內容-->
<div class="modal fade">
<div class="modal-dialog modal-fullscreen">/span>
...
</div>
</div>/span>
</div>/span>
</div>/span>
main是主內容區（可滾動）。
我試圖在main里面使用一個全屏模式，但它不是相對于視口的，而是相對于它的直接父級（即main）。
.modal使用position:fixed，它不會讓這種情況發生。所以我這樣做：
<div class="modal fade position-absolute"> /span>
<div class="modal-dialog modal-fullscreen">/span>
...
</div>
</div>/span>
但無濟于事。它使它看起來很亂。有沒有一種更干凈的方法來實作我想實作的目標呢？
uj5u.com熱心網友回復：
我不認為下面的代碼會比你的解決方案更干凈，但為了以防萬一，它是這樣的：
。這個想法是為了創建一個堆疊背景關系，這樣Position: fixed就不會是相對于視口的。一些屬性創建了一個堆疊背景關系(transform, ...可能還有一些)。
換句話說transform: translateX(0)在您的div.main元素上將使您的div.modal表現得像它有一個position: absolute。
編輯：關于創建堆疊背景關系的屬性的更多資訊：哪些CSS屬性創建了堆疊背景關系？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326605.html
標籤：