                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

绝对定位与相对定位组合使用

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

定位元素加入position:absolute;

为什么这样就能相对于参照元素来定位了，怎么理解，原理是什么？

慕勒6241362

2016-11-16

源自：初识HTML(5)+CSS(3) 13-9

关注问题我要回答

1981

操作

收起

4 回答

lusir_0001 回答被采纳 +3 积分
2016-11-16

其实如果仅仅只是用来确保定位元素随着参照定位的元素移动而移动，只要保证参照定位的元素是定位元素的前辈元素，并且定位元素加入position:absolute;，至于参照定位的元素是position:relative;还是position:absolute;都无所谓。可以这么理解，绝对定位会飘起来；相对定位创建了一个副本，让副本飘起来，而本身隐形。

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

收起回答

慕勒6241362 提问者

可是教程里说了“参照定位的元素必须加入position:relative”啊，这个relative不知道有什么用。

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

lusir_0001 回复慕勒6241362 提问者

我昨天也试了一下，个人觉得就是用来保留参照定位的元素原先的位置，如果你在参照定位的元素下再增加一个div的话，且参照定位的元素的定位属性是position:absolute;，则新增的div会衬在其下方，这会导致重叠，这也许就是教程必须加入position:relative的理由吧

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

lusir_0001 回复慕勒6241362 提问者

直白来说，使用position:relative就是为了占位

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

查看2条回复

lusir_0001
2016-11-16

个人理解，其实如果仅仅只是用来确保定位元素随着参照定位的元素移动而移动，只要保证参照定位的元素是定位元素的前辈元素，并且定位元素加入position:absolute;，至于参照定位的元素是position:relative;还是position:absolute;都无所谓。可以这么理解，绝对定位本身会飘起来；相对定位创建了一个副本，让副本基于本身原来位置去飘，而本身隐形。

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

收起回答