定位

来源：互联网发布：淘宝商城托管服务编辑：程序博客网时间：2024/04/28 02:24

利用position进行定位

其代码如下：

<html><head><title>position属性</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{margin:10px;font-family:Arial;font-size:13px;}#father{background-color:#a0c8ff;border:1px dashed #000000; width:100%;height:100%;}#block{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;/* absolute绝对定位 */left:20px;/* 块的左边框离页面左边界20px */top:40px;/* 块的上边框离页面上边界40px */}</style></head><body><div id="father"><div id="block">absolute</div></div></body></html>

运行结果如下：

如图：子模块是相对于浏览器的左上角而设置的。

如果#father设置为position；reative则子块就相对于父块的位置而定。

如果子块设置为position：relative时，子块则相对与父块移动，原封不动的移动。