我有一個父神，并使用相對位置和絕對位置將一個子神定位在它的頂部。 父節點是一張大圖片，子節點是一個像帶子一樣的3列行，帶子的高度小于父節點中大圖片的高度。 我所面臨的問題是第三個 div 的定位（不算帶子中的那些），也就是頁腳。
在小型設備上，由于父 div 的大圖片被調整了大小，我以 top:100% 的方式移動了帶子，這樣我就可以看到大圖片，從帶子的底部可以看到 3 列，這里需要將頁腳 div 移動到帶子（子 div）的最后一列的底部
。我試著在最后一列（頁腳）div上使用固定底部，當然它也可以作業，但是如果頁腳的內容不多，它就會在帶子和頁腳之間留下白色空間，而如果內容太多，它就會重疊。
<div class="container-fluid position-relative fz-wrap"> /span>
<div class="row h-100 align-items-center"/span>>
<div class="text-center"/span>>
< jpg" alt=">
</div>/span>
</div>/span>
<div class="fz-brand-band">/span>
<div class="row align-items-center">/span>
<div class="col-12 col-md-4 text-center fz-brand-1">
< img class="mx-auto d-flex rounded img-fluid" src="images/img-1. png" alt="">
</div>/span>
<div class="col-12 col-md-4 text-center fz-brand-2"/span>>
< img class="mx-auto d-flex rounded img-fluid" src="images/img-2. png" alt="">
</div>/span>
<div class="col-12 col-md-4 text-center fz-brand-3"/span>>
< img class="mx-auto d-flex rounded img-fluid" src="images/img-3. png" alt="">
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<div class="p-2"/span>>
頁腳
</div>
Css
.fz-brand-band {position: absolute; top: 0; background-color: rgba(180, 225, 180, 0。 4);}
.fz-wrap {overflow: hidden;}。
@media （max-width: 768px) {
.fz-wrap {overflow: visible; }
}
@media （max-width: 768px) {
.fz-brand-band {position: absolute; top: 100%; }
uj5u.com熱心網友回復：
為什么不改變這個...
@media (max-width: 768px) {
.fz-brand-band {position: absolute; top: 100%; }
...變成這樣？
@media (max-width: 768px) {
.fz-brand-band {position: relative; top: 100%;
}
你想通過設定position: absolute;達到什么目的？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/326607.html
標籤：
上一篇：Terraform匯入地圖資源
下一篇：串列視圖不能堆疊在一個容器上