春天没了老师讲【定位】

有关css的定位

1看看图片标签吧。把它们“粘贴”到你的图书馆首页“代码编辑”，观察一下各张图片的显示效果。看每张图片左上角的那一点与网页中“修改”按钮下面的那一条横线的最左端的相对位置。
这是：“居左0px居上0px的绝对定位图片”代码：
<IMG style="POSITION: absolute; WIDTH: 200px; TOP: 0px; LEFT: 0px" src=" http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>
2看，图片在网页中的位置。图片左上角的那一点是不是紧贴着网页中“修改”按钮下面那一条横线的最左端。
这是“居左200px居上0px的绝对定位图片”代码：
<IMG style="POSITION: absolute; WIDTH: 200px; TOP: 0px; LEFT: 200px" src=" http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>
3你再看看，图片在网页中的位置。图片左上角的那一点是不是与网页中“修改”按钮下面那一条横线最左端的那一点有一定的距离了。这个距离就是200px。

这是“居左0px居上200px的绝对定位图片”代码：
<IMG style="POSITION: absolute; WIDTH: 200px; TOP:200px; LEFT: 0px" src=" http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>

4看，图片在网页中的位置。图片跑到网页中“修改”按钮下面那一条横线的下方了。图片的上边缘与那一条横线的距离就是200px。这就是居上200px的效果。这是“居左0px居上-200px的绝对定位图片”代码：
<IMG style="POSITION: absolute; WIDTH: 200px; TOP:-200px; LEFT: 0px" src=" http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" wi

5大家再看，图片在网页中的位置。图片跑到网页中“修改”按钮下面那一条横线的上方了。图片的上边缘与那一条横线的距离就是200px。这就是居上-200px的效果。

同样的代码，只是修改了一个“居上”值。一个是居上：200px，一个是居上-200px，两张图片的显示效果就相差400px了。居上：200px，是说图片的上边缘在“修改”按钮下面那一条横线的下方200px处；居上：-200px，则是讲图片的上边缘在“修改”按钮下面那一条横线的上方200px处。

我暂时就讲这些吧。大家应该对css的定位样式有一个初步的认识了吧。不过，不用太着急，在后面的教程中我还会再详细一些讲解的。