                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

絕對定位與相對定位組合使用

參照定位的元素加入position:relative;

定位元素加入position:absolute;

為什么這樣就能相對于參照元素來定位了，怎么理解，原理是什么？

慕勒6241362

2016-11-16

源自：初識HTML(5)+CSS(3)-升級版 13-9

關注問題我要回答

1968

操作

收起

4 回答

lusir_0001 回答被采納 +3 積分
2016-11-16

其實如果僅僅只是用來確保定位元素隨著參照定位的元素移動而移動，只要保證參照定位的元素是定位元素的前輩元素，并且定位元素加入position:absolute;，至于參照定位的元素是position:relative;還是position:absolute;都無所謂?？梢赃@么理解，絕對定位會飄起來；相對定位創(chuàng)建了一個副本，讓副本飄起來，而本身隱形。

0 回復有任何疑惑可以回復我~

收起回答

#1

慕勒6241362 提問者

可是教程里說了“參照定位的元素必須加入position:relative”啊，這個relative不知道有什么用。

2016-11-17 回復有任何疑惑可以回復我~

#2

lusir_0001 回復慕勒6241362 提問者

我昨天也試了一下，個人覺得就是用來保留參照定位的元素原先的位置，如果你在參照定位的元素下再增加一個div的話，且參照定位的元素的定位屬性是position:absolute;，則新增的div會襯在其下方，這會導致重疊，這也許就是教程必須加入position:relative的理由吧

2016-11-17 回復有任何疑惑可以回復我~

#3

lusir_0001 回復慕勒6241362 提問者

直白來說，使用position:relative就是為了占位

2016-11-17 回復有任何疑惑可以回復我~

查看2條回復

lusir_0001
2016-11-16

個人理解，其實如果僅僅只是用來確保定位元素隨著參照定位的元素移動而移動，只要保證參照定位的元素是定位元素的前輩元素，并且定位元素加入position:absolute;，至于參照定位的元素是position:relative;還是position:absolute;都無所謂。可以這么理解，絕對定位本身會飄起來；相對定位創(chuàng)建了一個副本，讓副本基于本身原來位置去飄，而本身隱形。

0 回復有任何疑惑可以回復我~

收起回答