上一章CSS高级教程请查看：css元素的可视属性visibility
CSS position属性定义元素在页面上的定位方式。
CSS定位方法在网页上适当地定位元素是一个好的布局设计的必要条件，CSS中有几种方法可以用于定位元素，下面将逐一介绍这些定位方法。
静态定位静态定位元素总是根据页面的正常流进行定位。HTML元素默认定位为静态。静态定位元素不受top, bottom, left,
right和z-index属性的影响。
.box {
padding: 20px;
background: #7dc765;
}
相对定位相对定位元素相对于其法线位置定位。
在相对定位方案中，元件盒的位置是根据正常流量来计算的。然后根据属性top or bottom和/或left or right)将方框从正常位置移动。
.box {
position: relative;
left: 100px;
}
注意：一个相对定位的元素可以移动并与其他元素重叠，但是它在正常的流中保留了最初为它保留的空间。
绝对定位绝对定位元素是相对于第一个父元素定位的，父元素的位置不是静态的。如果没有找到这样的元素，它将被定位在一个相对于浏览器窗口左上角的页面上。可以使用top, right, bottom和left的一个或多个属性进一步指定框的偏移量。
绝对定位元素完全从正常流中取出，因此在放置兄弟元素时不占用任何空间。但是，它可以根据z-index属性值重叠其他元素。此外，一个绝对定位的元素可以有边距，并且它们不会与任何其他边距一起折叠。
.box {
position: absolute;
top: 200px;
left: 100px;
}
固定定位固定定位是绝对定位的一个子类。
惟一的区别是，固定位置的元素相对于浏览器的视口是固定的，并且在滚动时不移动。
.box {
position: fixed;
top: 200px;
left: 100px;
}
【css position定位属性 – CSS高级教程】注意：对于打印媒体类型，固定位置的元素在每个页面上呈现，并且相对于页面框固定(即使在打印预览中)。IE7和IE8只有在 < !DOCTYPE > 指定时才支持。
推荐阅读
- css图层z-index元素叠加 – CSS高级教程
- css元素的可视属性visibility – CSS高级教程
- css display显示属性 – CSS高级教程
- css可视格式化模型 – CSS高级教程
- css属性单位 – CSS高级教程
- css维度属性 – CSS高级教程
- css内容溢出处理 – CSS高级教程
- css光标cursor属性和样式 – CSS高级教程
- css轮廓outline属性和样式 – CSS高级教程