iT邦幫忙

0

一個絕對定位的問題

首先附上程式碼

https://codepen.io/willlai/pen/zYGKZME

問題:

由於設定了絕對定位

我的第二個區塊bb的起始點會從aa的背景圖底下開始當起點,

但我希望他是由aa裡面的黑色區塊下面才開始當起點,

不然bb的內容就會被黑色區塊擋住

想請問如果不在bb裡面設定padding-top讓他撐開的話,而是結構上

bb就是在黑色區塊下面開始

這樣該如何解決呢?

YoChen iT邦研究生 5 級 ‧ 2020-02-20 13:19:17 檢舉
.content的top為200px,height為200px,
因此.aa的height必須為400px才能讓他們底邊相接

1 個回答

3
ShawnL
iT邦新手 5 級 ‧ 2020-02-20 13:51:07
最佳解答

從 CSS 上考量:

margin collapsing 概念來處理可在 aa 區域 CSS 中下 margin-bottom 來解決。

.aa {
    margin-bottom: 100px;
}

優勢:清楚直白,你可以維持 .bb 區塊樣式的乾淨,讓 .bb 區塊能重複使用該樣式。
劣勢:得持續追蹤 position: fixed 中的區塊高度,若該區塊高度是動態的則需使用 JavaScript 取得高度運算完再塞回去。(e.g. 有 Responsive Web Design 的需求。)

從結構問題上考量:

可以將 .content 外層包裹一層,並將浮動樣式下在 .wrapper 上,並將 .bb 區塊移入其中,此時 .content 區塊將會與 .bb 共同擁有同個 flow 而自動將內容往下排列。

<div class="aa">
    <div class="wrapper">
      <div class="content">...</div>
      <div class="bb">...</div>
    </div>
</div>

優勢:不須多餘的樣式定義,依靠 normal flow 讓內容自動排列。
劣勢:後續 .aa 區塊若有鄰層元素的需求(sibling element),仍然要解決同樣的問題。


解決的問題有很多種,當然不只有這兩個,所以

It depend on you!

willlai iT邦新手 5 級 ‧ 2020-02-20 16:09:05 檢舉

謝謝你的解答

我要發表回答

立即登入回答