css绝对定位相对定位

CSS中的定位属性是布局控制的重要工具，它主要有两种主要方式：绝对定位（absolute positioning）和相对定位（relative positioning）。

**1. 相对定位 (Relative Positioning)**：
- 原则：相对定位是基于元素的正常文档流来进行定位的。如果设置了`position: relative;`，元素会保持其在文档中的默认位置，然后可以通过`top`, `right`, `bottom`, 和 `left` 属性指定偏移量。
- 行为：相对定位的元素不会影响到其他元素的位置，它会在原位置的基础上移动，同时周围的元素会围绕它移动。
- 示例：你可以使用相对定位来创建一个弹出框或浮动元素。

**2. 绝对定位 (Absolute Positioning)**：
- 原则：绝对定位元素会脱离正常的文档流，完全根据`top`, `right`, `bottom`, `left` 属性以及`position: absolute;`声明来定位，与最近的已定位（`position: relative;`）祖先元素相关联，如果没有，则相对于视口（浏览器窗口）定位。
- 行为：绝对定位元素会完全离开其在文档中的原始位置，其他元素也不会因此受到影响，除非它们也设置为绝对定位并覆盖了该元素。
- 示例：通常用于创建固定在页面某个角落的导航菜单或图片，或者是响应式的网页设计中，如轮播图中的图片。

**相关问题**:
1. 相对定位和绝对定位有什么区别？
2. 如何使用`position: relative;`和`position: absolute;`来配合使用？
3. 绝对定位的`z-index`属性有什么作用？