CSS是网页制作的必备技能之一，其中position属性是实现网页元素自由定位的核心属性之一。不同的position属性值可以实现不同的效果，让我们来一一了解。

　　一、position属性值

　　1. static

　　static是默认的属性值，设定static后，元素框就按普通文档流产生，元素框出现在正常的流中，并保持其在文档流中的位置。该属性值通常不会用于实现元素自由定位。

　　2. relative

　　相对定位的元素框偏移原本的位置，元素仍然保持在文档流中，如果不指定偏移值，则元素的位置不会改变。下面是实现相对定位的代码：

　　```

　　div{

　　 position:relative;

　　 top:30px; //向下偏移30px

　　 left:50px; //向右偏移50px

　　}

　　```

　　3. absolute

　　绝对定位的元素框从文档流中完全脱离，并相对于其最近的非static的祖先元素定位。如果不存在这样的祖先元素，则相对于body元素定位。它可以覆盖其他元素，因此必须设置z-index属性来控制它们之间的层次关系。下面是实现绝对定位的代码：

　　```

　　div{

　　 position:absolute;

　　 top:30px; //距离顶部偏移30px

　　 left:50px; //距离左侧偏移50px

　　 z-index:1;

　　}

　　```

　　4. fixed

　　fixed定位基于浏览器窗口定位，无论页面滚动与否，元素始终停留在窗口某个位置。下面是实现fixed定位的代码：

　　```

　　div{

　　 position:fixed;

　　 top:30px; //距离顶部偏移30px

　　 right:50px; //距离右侧偏移50px

　　 z-index:1;

　　}

　　```

　　二、如何使用position属性实现页面元素自由定位？

　　下面是一个实际案例，假设你需要实现以下页面布局：

　　

　　根据元素的排布，图片占据左侧的三分之一，而文字占据右侧的三分之二，在实现这个效果时可以使用float属性定位图片，使用position属性来定位文字。

　　1. 定义HTML结构

　　```