CSS 定位

CSS 定位 （Position）

CSS 中的定位属性用于控制元素在文档中的位置和布局。共有四种定位属性，分别是：

1. static

描述：默认定位方式，元素在文档中遵循正常的文档流，不受定位影响。

特点：

• top，right，bottom，left等属性对该元素无效。

.element {
  position: static;
}

2. relative

描述：相对定位，元素在文档中仍占据原始位置，但可以通过top，right，bottom，left属性进行偏移调整。

特点：

• 调整后的位置相对于原始位置进行偏移，不影响其他元素的布局。

.element {
  position: relative;
  top: 10px;
  left: 20px;
}

3. absolute

描述：绝对定位，元素从文档流中脱离，根据最近的非static定位祖先元素进行定位。如果没有非static定位的祖先元素，则根据文档的初始坐标系定位。

特点：

• 通过top，right，bottom，left属性进行定位，相对于最近的定位祖先元素进行偏移。

.element {
  position: absolute;
  top: 50px;
  right: 20px;
}

4. fixed

描述：固定定位，元素脱离文档流，相对于浏览器窗口进行定位。

特点：

• 随着页面滚动，元素始终保持在固定位置。

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

以上是CSS中关于定位的四种属性，灵活运用这些属性，可以实现元素的自由定位和布局，达到丰富多样的页面效果。