div css 定位 position 详解

## div css 定位(position)详解
在 CSS 中，`position` 属性用于指定元素的定位方式。通过使用不同的定位方式，可以实现元素的相对定位、绝对定位、固定定位等效果。以下是对 `position` 属性的详细解释：
### 1. 静态定位(static) 静态定位是 `position` 属性的默认值，元素按照正常文档流进行布局。使用静态定位的元素不会受到 top、right、bottom 和 left 属性的影响，也不会触发 `z-index` 属性。
### 2. 相对定位(relative) 相对定位的元素会相对于其在正常文档流中的位置进行移动。使用相对定位的元素可以通过 `top`、`right`、`bottom` 和 `left` 属性来指定元素的偏移量，从而实现元素的相对定位效果。相对定位不会改变元素在文档流中的位置，只会在元素原来的位置上留下一个空白区域。
### 3. 绝对定位(absolute) 绝对定位的元素会相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，那么元素将相对于文档的根元素（即 `` 元素）进行定位。使用绝对定位的元素可以通过 `top`、`right`、`bottom` 和 `left` 属性来指定元素的偏移量，从而实现元素的绝对定位效果。绝对定位会完全脱离文档流，不会对其他元素的布局产生影响。
### 4. 固定定位(fixed) 固定定位的元素会相对于浏览器窗口进行定位。使用固定定位的元素可以通过 `top`、`right`、`bottom` 和 `left` 属性来指定元素的偏移量，从而实现元素的固定定位效果。固定定位会完全脱离文档流，不会对其他元素的布局产生影响，并且会一直保持在浏览器窗口的固定位置。
### 5. 粘性定位(sticky) 粘性定位是 CSS3 中的一个新特性，它的行为类似于相对定位和固定定位的混合。使用粘性定位的元素会在其到达特定的位置时（例如，在视口中滚动到一定位置时）变为固定定位。粘性定位的元素会在其包含块内进行定位，并且会在包含块内滚动时保持相对定位的行为。
通过使用 `position` 属性的不同值，可以实现各种复杂的布局效果。在实际开发中，需要根据具体需求选择合适的定位方式，并合理使用 `top`、`right`、`bottom` 和 `left` 属性来控制元素的位置。同时，还需要注意不同浏览器对 `position` 属性的兼容性问题，确保在不同浏览器中能够正确显示布局效果。