一個絕對定位的問題

css html rwd

willlai 2020-02-20 11:16:47 ‧ 1666 瀏覽

首先附上程式碼

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

問題:

由於設定了絕對定位

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

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

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

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

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

這樣該如何解決呢?

YoChen iT邦研究生 1 級 ‧ 2020-02-20 13:19:17 檢舉

.content的top為200px，height為200px，
因此.aa的height必須為400px才能讓他們底邊相接

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ShawnL

iT邦新手 1 級 ‧ 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!

回應 1
分享
檢舉

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

謝謝你的解答

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙