第十四课：元素的位置

用CSS定位，可以将元素精确的放置在网页任何地方。与floats结合应用，positioning能给予你创建高级和精确样式的更多可能性。下面是本课将讨论的课题：

CSS的positioning概念
绝对positioning
相对positioning

CSS定位的原理

把浏览器窗口想象成一个坐标系统：

CSS定位的概念是可以将任何box放置在坐标系统中的任何位置。假设我们想定位一个标题。使用箱体模式可以让标题显示为：

如果我们想让标题出现在文档上部起100px，左起200px的地方，可以输入以下CSS

code>
h1 {
position:absolute;
top: 100px;
left: 200px;
}

如你所见，用CSS定位是布置元素非常精确的技术。它比使用tables，“transparent images”和其它方法更容易。

绝对位置

在文件中，被绝对定位的元素不会留下任何空间。药绝对定位元素，应将特性position设为absolute。随后可以用特性left，right，top和bottom定位箱体。作为一个绝对定位的实例，我家将在文本的每个角放置一个箱体。

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

相对位置

药定位一个元素的相对位置，可以将特性position设置为relative。绝对与相对的区别是位置的计算方式。一个元素的相对位置计算是从文档的起始位置开始。这意味着将元素移动到右边，左边，上边或下边。用这种方法，元素在定位后仍然在文档中获得一个空间。在下面这个相对位置的实例，将尝试将三个图片基于网页的原始位置定义相对位置。注意图片是如何留下空间的。

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

总结

你从前面两课学习了怎样用float和position定位原始。这两种方法给你更多设计网页的选择，而不必使用传统HTML的tables和透明图片。它更精确和先进，并且也容易维护。