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

偏移前的位置保留不动

先理解绝对定位

把代码改成：

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative样式</title> <style type="text/css">
#div1{ width:200px; height:200px; border:2px red solid;position:absolut;left:200px;top:100px;} </style> </head> <body>

<SPAN>偏移前的位置保留不动偏移前的位置保留不动偏移前的位置保留不动</SPAN></body> </html>

显示效果是

div的原有位置改动了，left:200px;top:100px,而span中的内容则显示到div之上了(有点像给div加了个浮动效果)，也就是说div的原来位置是改变了，

再看相对定位中，偏移前的位置保留不动　先确定了div的原有位置和span原有的位置没有变,当div原有的位置发生相对定位改变时,span还是在原来的位置,否则 span中的内容位置也会发生改变,可是没有改变,相对定位则有点像是copy了一份粘贴到了其他位置,绝对定位则是相当于直接剪切掉了粘贴到其他的新位置.

不知道我的理解正确不.有不正确的说下..