2.8 定位元素
Web页面中的元素位置就是它们在文档中的位置，但可以通过将元素的position属性由默认的static改为absolute、relative或fixed来移动它们。
绝对定位的元素从文档中移除后，其他任何可能的元素将流入其空出的空间。然后，可使用top、right、bottom和left属性将该对象定位到文档中的任意位置。之后它将位于其他元素之上或之下。
例如，要将ID为object的对象移至从文档开始处向下100像素，距离左边200像素的一个绝对位置，可以对其应用下列规则(也可使用CSS支持的任一度量单位)：
#object {
position:absolute;
top :100px;
left :200px;
}
同样，也可以相对于对象在常规(或普通)文档流中占据的位置移动它。例如，要将object从常规位置向下移10像素，向右移10像素，可使用下列规则：
#object {
position:relative;
top :10px;
left :10px;
}
最后一个定位属性设置可将对象移到一个绝对位置，但只是在当前浏览器视口中。然后，当文档滚动时，对象保持在原来的位置，而主文档在其后面滚动——这是创建停靠栏和其他类似设计的强大方法。例如，要将object固定到浏览器窗口的左上角，可使用下列规则：
#object {
position:fixed;
top :0px;
left :0px;
}
图2-3显示了一个简单的停靠条，其创建方法是对position属性使用fixed值，将图标在屏幕底部对齐。通过少量JavaScript或CSS专有的转换，可使图标在鼠标划过时改变大小，而且之后的图标也是如此。可参见本书作者的Plug-in JavaScript(McGraw-Hill Professional，2010)一书，了解这个和其他许多纯JavaScript插件。
图2-3 使用position属性创建一个简单的停靠栏
