作者cgcat (小綿羊趕集)
看板Web_Design
標題[問題] 一個絕對定位的問題
時間Thu Feb 20 10:52:24 2020
首先附上程式碼
https://codepen.io/willlai/pen/zYGKZME
問題:
由於設定了絕對定位
我的第二個區塊bb的起始點會從aa的背景圖底下開始當起點,
但我希望他是由aa裡面的黑色區塊下面才開始當起點,
不然bb的內容就會被黑色區塊擋住
想請問如果不在bb裡面設定padding-top讓他撐開的話,而是結構上
bb就是在黑色區塊下面開始
這樣該如何解決呢?
感謝高手解答
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 210.242.160.66 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1582167147.A.50D.html
1F：推 nick8195: 從css來看, 已經明確知道黑色的高度和定位的top 02/20 11:07
2F：→ nick8195: 感覺直接用padding或margin沒什麼錯啊 02/20 11:08
3F：→ nick8195: 想要真的很靈活的話 用js去算吧 02/20 11:08
4F：→ nick8195: 將(黑色的top+高度 - aa的高度), 設定為bb的margin-top 02/20 11:09
5F：→ cgcat: 這個範例我刻意簡單化把黑色區塊的高度清楚寫出來,但 02/20 11:11
6F：→ cgcat: 我實做上,我的黑色區塊部分必須不能去限制高度,所以想了解 02/20 11:12
7F：→ cgcat: 應該怎麼用CSS去處理呢?我想應該是我對絕對定位還不夠了解 02/20 11:13
8F：→ cgcat: 謝謝NICK大的回答喔 02/20 11:13
10F：→ nick8195: 上面是用jquery計算 想不到單純用css要怎麼處理 哈哈 02/20 11:42
11F：→ cgcat: 哈阿~謝謝NICK大喔!絕對定位好奧妙,但又很好用~苦手 02/20 11:57
12F：→ Rplus: 提問敘述很不OK 列出哪些是固定值、哪些是變動值、DOM結構 02/20 13:32
13F：→ Rplus: 、以及期望UI 標清楚這些關鍵因素才不用反覆確認需求 02/20 13:33