作者broo (陳爺)
看板Web_Design
標題[問題] position relative問題
時間Sun Nov 27 14:38:23 2016
剛剛在做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://webptt.com/m.aspx?n=bbs/Web_Design/M.1480228706.A.7B7.html
※ 編輯: broo (49.159.117.170), 11/27/2016 15:09:33
2F：推 s89227: margin跟position完全不同… 11/27 15:11
3F：→ s89227: margin可以理解成外留白，position是定位方式 11/27 15:12
4F：→ steven04090: 因為你的每一個question的老爸都是body 11/27 15:24
5F：→ broo: 我現在癥結的點是我在選擇器裡設了left:500px,整排question 11/27 15:33
6F：→ broo: 都會移動，那為何設了top:40px卻只有第一個question會動， 11/27 15:33
7F：→ broo: 麻煩你們!! 11/27 15:33
8F：→ steven04090: relative是根據他的父元素產生相對位移 11/27 15:43
9F：→ steven04090: 你的每一個question的父元素不是上一個question而是 11/27 15:43
10F：→ steven04090: body 所以全部都是相對於body來移動 11/27 15:44
11F：→ steven04090: 你把其中一個question 放到另一個question自然會明白 11/27 15:46
12F：→ broo: 原來如此!!!謝謝你們幫了大忙! 11/27 15:52
14F：→ Kenqr: relative不是相對父元素 是相對自己原本的位置 11/27 21:16
15F：→ Kenqr: 大家都往上200px 所以中間的距離不變 11/27 21:17
16F：→ broo: 原來是這樣..稍微搞混了一下..謝謝你!! 11/27 22:50
17F：→ steven04090: 抱歉 記成跟絕對定位的一些使用 11/28 08:27