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

”偏移前的位置保留不动”怎么理解？

最后一段中：虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。这句话是什么意思？

梦里会花开花落吗

2016-09-22

源自：初识HTML(5)+CSS(3)-升级版 13-7

关注问题我要回答

2876

操作

收起

13 回答

六月熊回答被采纳 +3 积分
2016-09-22

就是元素在偏移前所占的位置（我理解为像素）依旧保存，只是这个元素对象偏移到了新的位置上。并且，偏移前的位置上其他元素也无法占用(打个比方，我原先在A位置排队，现在插队到了位置B,虽然我现在不使用A位置，但这个位置其他人也不能用，一样处于被占用状态)。上几张图，注意#div1标记中内容的区别和结果显示位置：

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

收起回答

梦里会花开花落吗提问者

非常感谢！

2016-09-22 回复有任何疑惑可以回复我~

qq_STRONGER_27
2016-10-13

简单来说，就是框框动了，内容没动

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

收起回答

慕粉3917843
2016-09-27

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

收起回答

我要开发地图系统
2016-09-22

这就是占位的概念，无论它自己移到什么位置，它都会同时占据着原来的位置。

简单来打个比喻，比如看电影，你买电影票，然后去上厕所了，虽然你人在厕所里，但那个座位你还占着，那个位置一直留给你，别人不能用；就算你买了票不去看，座位也会留空，别人不能用。

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

收起回答

qq_凉爱花钱呀_03928167
2016-09-22

偏移前的位置属性仍然保留，那行文字相对于哦按以前的位置是固定的，即使偏移后也无法覆盖那行文字

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

收起回答

随遇而安的情怀
2016-09-22

自己看

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

收起回答

最终也没有
2016-09-22

左边：

第一张是没有偏移的图片

第二张是偏移之后的图片

第三张是解释偏移的图片

左边：<span>里的文字“偏移前的位置”没有任何移动。

说明了红色的正方形(div)只是看起来移动了.

实际上他的位子还是在第一张图的位子。

这就是偏移前的位子保留不动。(相对定位)

反过来：绝对定位就是实际位子发生了改变。

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

收起回答

qq_blueberry_1
2016-09-22

比如一开始 div的位置在 100px 100px的位置，有个span使用相对布局依赖它的位置（比如span 在它下面位置为 100px 110px)

之后它发生了偏移，移动到120px，120px的位置但是 span还是依赖它之前的位置，仍然是（100px 110px)

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

收起回答

輪回4032480
2016-09-22

我的理解:偏移前位置保留不动，可以想成之前位置的图形成为一个隐形的图形，看不见了，#div1{position：relative}，加了相对定位，<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>，后面的<span></span>的内容还是以隐形的图形（也就是之前位置的图形）为基准的，在div里面才会以移动后的图形为准。

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

收起回答