                        課程
                    
                        /前端開發
                        
                            /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了一份粘貼到了其他位置,絕對定位則是相當于直接剪切掉了粘貼到其他的新位置.

不知道我的理解正確不.有不正確的說下..