1.相对定位

图1：

图2：

页面源码：

通过伪类选择器选择鼠标悬停的li标签，通过相对定位使该标签内容相对其本身原来位置发生一定距离的偏移。

2.绝对定位

页面图：

页面源码：

通过相对定位，将整个div定位在页面顶部中间位置，而a标签的内即搜索图标，通过绝对定位放置于离div上方和右侧各1px的位置，需注意的是，若div位置没有发生变化为默认值时，a标签则要再向上一级找父类标签，即body，这时是放置于离整个页面的上方和右侧各1px的位置。（页面上下移动时，div的位置会随着上下移动）

3.固定定位

页面图：

页面源码：

通过固定定位，将id=”header”的div内容放置于页面顶部，同时将id=”content”的div与页面的顶部距离设置成标题的高度，以免被标题div遮盖，通过固定定位的内容，并不会随着页面的上下移动而上下移动。