[問題] position relative問題

看板Web_Design作者 (陳爺)時間8年前 (2016/11/27 14:38), 8年前編輯推噓1(1016)
留言17則, 4人參與, 最新討論串1/1
剛剛在做codecademy的教學,想問的是我剛剛設了一個選擇器 內容如下: .question{ position:relative; top:240px; margin:120px auto; text-align:center; } 執行結果是這樣 http://imgur.com/bvBaHxq
將top改為40px後結果變這樣http://imgur.com/pv4xsyB
怎麼改都只有question1和上面的header距離有產生變化 為何question2 和question1中間都不會有變化呢? 我其他的question也有套用選擇器 另外margin跟 relative position 有什麼不同嗎? 用一用覺得很像阿.. 謝謝各位 下面圖片網址點進去有完整程式碼 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 49.159.117.170 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1480228706.A.7B7.html

11/27 14:52, , 1F
11/27 14:52, 1F
※ 編輯: broo (49.159.117.170), 11/27/2016 15:09:33

11/27 15:11, , 2F
margin跟position完全不同…
11/27 15:11, 2F

11/27 15:12, , 3F
margin可以理解成外留白,position是定位方式
11/27 15:12, 3F

11/27 15:24, , 4F
因為你的每一個question的老爸都是body
11/27 15:24, 4F

11/27 15:33, , 5F
我現在癥結的點是我在選擇器裡設了left:500px,整排question
11/27 15:33, 5F

11/27 15:33, , 6F
都會移動,那為何設了top:40px卻只有第一個question會動,
11/27 15:33, 6F

11/27 15:33, , 7F
麻煩你們!!
11/27 15:33, 7F

11/27 15:43, , 8F
relative是根據他的父元素產生相對位移
11/27 15:43, 8F

11/27 15:43, , 9F
你的每一個question的父元素不是上一個question而是
11/27 15:43, 9F

11/27 15:44, , 10F
body 所以全部都是相對於body來移動
11/27 15:44, 10F

11/27 15:46, , 11F
你把其中一個question 放到另一個question自然會明白
11/27 15:46, 11F

11/27 15:52, , 12F
原來如此!!!謝謝你們幫了大忙!
11/27 15:52, 12F

11/27 21:16, , 13F

11/27 21:16, , 14F
relative不是相對父元素 是相對自己原本的位置
11/27 21:16, 14F

11/27 21:17, , 15F
大家都往上200px 所以中間的距離不變
11/27 21:17, 15F

11/27 22:50, , 16F
原來是這樣..稍微搞混了一下..謝謝你!!
11/27 22:50, 16F

11/28 08:27, , 17F
抱歉 記成跟絕對定位的一些使用
11/28 08:27, 17F
文章代碼(AID): #1OEdzYUt (Web_Design)
文章代碼(AID): #1OEdzYUt (Web_Design)