CSS精细控制``标签位置：详解定位、布局及响应式技巧97

这是默认的定位方式。元素按照文档流进行排列，不能通过`top`、`right`、`bottom`、`left`属性进行偏移。

2. 相对定位 (position: relative;)

元素仍然按照文档流进行排列，但是可以使用`top`、`right`、`bottom`、`left`属性相对于其在文档流中的原始位置进行偏移。元素的原始空间会被保留。

示例：```css
a {
position: relative;
top: 10px;
left: 20px;
}
```

3. 绝对定位 (position: absolute;)

元素脱离文档流，相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于`html`元素进行定位。可以使用`top`、`right`、`bottom`、`left`属性进行偏移。

示例：```css
.container {
position: relative; /* 必须设置一个已定位的祖先元素 */
width: 300px;
height: 200px;
}
.container a {
position: absolute;
top: 10px;
right: 10px;
}
```

4. 固定定位 (position: fixed;)

元素脱离文档流，相对于浏览器窗口进行定位。滚动页面时，元素的位置保持不变。可以使用`top`、`right`、`bottom`、`left`属性进行偏移。

5. 粘性定位 (position: sticky;)

元素的行为类似于相对定位和固定定位的组合。当元素在视口中滚动到指定偏移位置时，它会变为固定定位；否则，它会保持相对定位。