CSS定位（高级技巧）

一、定位（position）

作用：灵活的改变盒子在网页中的位置

1.相对定位

属性值：relative
特点：

• 占用原本位置，不脱标
• 很少单独使用
• 显示模式不变

例：
position: relative

2.绝对定位

属性值：absolute
特点：

• 不占位，脱标
• 显示模式具备行内块特点
• 和相对定位配合使用（父相子绝）

例：
position: absolute
居中定位
水平、垂直边偏移50%
transform: translate(-50%, -50%)
意思：自身水平、垂直方向的一半

3.固定定位

属性值：fixed
特点：

• 不占位，脱标
• 显示模式具备行内块特点
• 元素的位置在网页滚动时不会改变

4.堆叠层级（z-index）

属性值：整数数字（默认是0，数字大的显示在上面）

div{
  z-index: 1;
}

5.定位总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	不变	原本位置
绝对定位	absolute	是	行内块	祖先级位置
固定定位	fixed	是	行内块	浏览器窗口

二、高级技巧

1.CSS精灵

添加background-position属性，改变背景图位置

2.字体图标

• 字体图标：展示的是图标，本质是字体
• 修改大小、颜色跟修改字体一样

下载图标

• iconfont 图标库官网：https://www.iconfont.cn/
  

• 进入官方图标库
  

• 单击需要的图标样式
  

• 将需要的图标加入购物车
  

• 单击下载代码
  

• 引入字体样式表（iconfont.css）

使用方法：

三、CSS修饰属性（vertical-align）

属性值	说明
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

1.过渡（transition）

属性值：过渡的属性 时间 (s)
例：

img {
width: 100px;
height: 100px;
transition: all 1s;
/* all（两个状态属性值不同的所有属性，都产生过渡效果） */
}
img:hover {
width: 300px;
height: 300px;
}

2.透明度 （opacity）

属性值的取值	说明
0	完全透明（元素不可见）
1	不透明
0-1之间小数	半透明

3.光标类型（cursor）

属性值	说明
default	箭头（默认）
pointer	小手
text	工字
move	十字