最后一段中:虽然div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以后面的span元素是显示在了div元素以前位置的后面。这句话是什么意思?
就是元素在偏移前所占的位置(我理解为像素)依旧保存,只是这个元素对象偏移到了新的位置上。并且,偏移前的位置上其他元素也无法占用(打个比方,我原先在A位置排队,现在插队到了位置B,虽然我现在不使用A位置,但这个位置其他人也不能用,一样处于被占用状态)。上几张图,注意#div1标记中内容的区别和结果显示位置:
简单来说,就是框框动了,内容没动
<!--relative移动后,偏移前的位置保持不变,后面的其他元素和别的不相干盒子不会受影响 不会打乱整个布局-->
<!--absolute偏移后,偏移钱的位置发生改变,后面的其他元素和别的不相干的盒子会受到影响 ,容易打乱后面的整个布局 -->
这就是占位的概念,无论它自己移到什么位置,它都会同时占据着原来的位置。
简单来打个比喻,比如看电影,你买电影票,然后去上厕所了,虽然你人在厕所里,但那个座位你还占着,那个位置一直留给你,别人不能用;就算你买了票不去看,座位也会留空,别人不能用。
偏移前的位置属性仍然保留,那行文字相对于哦按以前的位置是固定的,即使偏移后也无法覆盖那行文字
自己看
左边:
第一张是没有偏移的图片
第二张是偏移之后的图片
第三张是解释偏移的图片
左边:<span>里的文字“偏移前的位置”没有任何移动。
说明了红色的正方形(div)只是看起来移动了.
实际上他的位子还是 在第一张图的位子。
这就是偏移前的位子保留不动。(相对定位)
反过来:绝对定位就是实际位子发生了改变。
比如一开始 div的位置 在 100px 100px的位置,有个span使用相对布局依赖它的位置(比如span 在它下面位置为 100px 110px)
之后它发生了偏移,移动到120px,120px的位置 但是 span还是依赖它之前的位置,仍然是 (100px 110px)
我的理解:偏移前位置保留不动,可以想成之前位置的图形成为一个隐形的图形,看不见了,#div1{position:relative},加了相对定位,<div id="div1"></div><span>偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置</span>,后面的<span></span>的内容还是以隐形的图形(也就是之前位置的图形)为基准的,在div里面才会以移动后的图形为准。
打个比方,原来的布局就好像隐藏了,只是看不到,但是还在那里,就好像隐身人藏到一个只能装一个人的柜子里,再想藏人就藏不了,但是你看不见
示例中不是有一个span嘛,,,也就是说span依然是跟在原来的位置后面
可以理解为偏移前的位置不动,即不影响其他元素的位置
也就是原来那个位置不会空出来,后面的元素会跟在原来div的位置后面显示。