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结构

```