CSS3 定位

CSS3 中的定位机制主要包括 static、relative、absolute、fixed 和 sticky 五种方式，用于控制元素在页面中的布局。

static
默认定位方式，元素遵循正常的文档流，不受 top、right、bottom、left 或 z-index 属性的影响。

div {
  position: static;
}

relative（常用）
相对定位，元素仍占据文档流中的原始空间，但可以通过 top、right、bottom、left 调整位置。偏移是相对于元素自身原始位置计算的。

div {
  position: relative;
  top: 20px;
  left: 30px;
}

absolute（常用）
绝对定位，元素脱离文档流，相对于最近的非 static 祖先元素定位。若无符合条件的祖先，则相对于视口（viewport）。

div {
  position: absolute;
  top: 0;
  right: 0;
}

fixed（常用）
固定定位，元素脱离文档流，相对于视口定位，滚动页面时位置不变。

div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

sticky
粘性定位，元素在滚动到特定阈值前表现为 relative，之后变为 fixed。需指定 top、right、bottom 或 left 中的一个。

div {
  position: sticky;
  top: 0;
}

CSS精灵

通过background-image引入合并后的大图，并设置background-position的坐标值（通常为负值）定位目标区域。

.icon {
  width: 30px;
  height: 30px;
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}
.icon-home {
  background-position: -10px -20px; /* 调整坐标显示对应图标 */
}
 

字体图标

字体图标（如 Font Awesome、Material Icons）通过字符编码显示为矢量图形，具有缩放无损、颜色可调、加载速度快等优势。

使用方法

1. 引入字体文件
   常用的下载字体图标库：http://www.iconfont.cn

 <link rel="stylesheet" href="../iconfont/iconfont.css"> //引入图标库

1. 使用图标类名
   通过 HTML 标签的类名调用图标：

<span class="iconfont icon-icon-test2"></span> 复制的图标放里面

1. 自定义样式
   通过 CSS 调整大小、颜色等属性：

.fa-user {
  font-size: 24px;
  color: #ff5733;
}

优势

• 矢量缩放不失真。
• 减少 HTTP 请求（相比图片图标）。
• 支持 CSS 动态修改样式。

注意事项

• 需加载完整的字体文件，可能影响性能。
• 部分图标库需遵循许可证要求。

通过合理使用定位和字体图标，可以高效实现复杂布局和视觉优化。