[問題] 一個絕對定位的問題

[cgcat (小綿羊趕集)]

首先附上程式碼

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

問題:

由於設定了絕對定位

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

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

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

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

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

這樣該如何解決呢?

感謝高手解答



--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 210.242.160.66 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1582167147.A.50D.html
推 nick8195: 從css來看, 已經明確知道黑色的高度和定位的top
→ nick8195: 感覺直接用padding或margin沒什麼錯啊
→ nick8195: 想要真的很靈活的話 用js去算吧
→ nick8195: 將(黑色的top+高度 - aa的高度), 設定為bb的margin-top
→ cgcat: 這個範例我刻意簡單化把黑色區塊的高度清楚寫出來,但
→ cgcat: 我實做上,我的黑色區塊部分必須不能去限制高度,所以想了解
→ cgcat: 應該怎麼用CSS去處理呢?我想應該是我對絕對定位還不夠了解
→ cgcat: 謝謝NICK大的回答喔
推 nick8195: https://tinyurl.com/vma4r6a
→ nick8195: 上面是用jquery計算 想不到單純用css要怎麼處理 哈哈
→ cgcat: 哈阿~謝謝NICK大喔!絕對定位好奧妙,但又很好用~苦手
→ Rplus: 提問敘述很不OK 列出哪些是固定值、哪些是變動值、DOM結構
→ Rplus: 、以及期望UI 標清楚這些關鍵因素才不用反覆確認需求