(九).定位，精灵图

1 定位

1.1 相对定位

① 如何设置相对定位

position: relative;

② 相对定位元素定位的参考点

参照自己原来的位置进行定位

③ 相对定位元素的特点

1. 不脱离文档流
2. 不会改变元素的显示模式（保持原来的行内、块级、行内块、浮动）
3. 可以使用 left、right、top、bottom 调整元素的位置
   使用百分比作为长度，left和right参照父元素内容宽度，top和bottom参照父元素内容高度

1.2 绝对定位

① 如何设置绝对定位

position: absolute;

② 绝对定位元素定位的参考点

1. 绝对定位元素定位的参照点是包含块
2. 没有绝对定位的元素包含块就是父元素
   绝对定位元素的包含块是第一个定位（任何定位都可以）的祖先元素，如果祖先元素没有定位，包含块就是整个页面

③ 绝对定位元素的特点

1. 绝对定位脱离文档流
2. 不论元素原来的显示模式（行内、块级、行内块、浮动），设置为绝对定位，就是绝对定位元素，拥有自己的显示特点
3. 绝对定位元素的显示特点
   ① 默认宽高被内容撑开（区别于块级元素）
   ② 可以设置宽高以及内外边距（区别于行内元素）
   ③ 不存在外边距塌陷和合并，左右外边距设置为auto也不会居中（区别于块级元素）
   ④ 不会被父元素作为文本（区别于行内块元素）
4. 可以 left、right、top、bottom 调整绝对定位元素的位置
   使用百分比作为长度，left、right 参照包含块的宽度，top、bottom参照包含块的高度

1.3 固定定位

① 如何设置为固定定位

position: fixed;

② 固定定位的元素定位参考点

固定定位元素参照视口进行定位

③ 固定定位元素的特点（同绝对定位）

1. 固定定位脱离文档流
2. 不论元素原来的显示模式（行内、块级、行内块、浮动），设置为固定定位，就是固定定位元素，拥有自己的显示特点
3. 固定定位元素的显示特点
   ① 默认宽高被内容撑开（区别于块级元素）
   ② 可以设置宽高以及内外边距（区别于行内元素）
   ③ 不存在外边距塌陷和合并，左右外边距设置为auto也不会居中（区别于块级元素）
   ④ 不会被父元素作为文本（区别于行内块元素）
4. 可以 left、right、top、bottom 调整绝对固定位元素的位置
   使用百分比作为长度，left、right 参照视口的宽度，top、bottom参照视口的高度

固定定位就是一种特殊的绝对定位！

1.4 定位层级 z-index

1. 定位的元素的显示层级高于不定位的元素
2. 绝对定位、固定定位、相对定位显示层级是一致的，后面的元素会显示在上层
3. 使用 z-index 可以设置元素的显示层级，值是纯数字，数字越大显示层级越高，可以是负值
4. 只有定位的元素设置 z-index 才有效

1.5 定位相关 CSS 属性

CSS 属性名	功能	属性值
position	设置定位	static：不定位，默认值。 relative：相对定位。 absolute：绝对定位。 fixed：固定定位。
left	设置位置	长度
right	设置位置	长度
top	设置位置	长度
bottom	设置位置	长度
z-index	设置显示层级	纯数字

1.6 定位的应用

① 定位元素（绝对和固定）的默认宽高计算

1. 绝对定位和固定定位如果不设置固定宽高，默认宽高被内内容撑开
2. 绝对定位和固定定位元素如果没有设置固定宽度，同时设置 left 和 right，对宽度有影响
   绝对定位和固定定位元素如果没有设置固定高度，同时设置 top 和 bottom，对高度有影响

② 设置定位元素（绝对和固定）在包含块中水平垂直都居中

方案一：

position: abolute;
left: 50%;
top: 50%;
margin-left: -宽度/2;
margin-top: -高度/2;

方案二：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

这里margin是给定位元素设置auto属性，所以上下左右都可以生效，不同于块元素

2 精灵图

2.1 什么是精灵图

把小的图片合并到一张大的图片上

多个元素使用相同的图片作为背景图像，但是设置不同的图像位置，实现各自元素显示的图案不同

2.2 精灵图的优点

减少图片的请求次数，提高网页加载速度。

2.3 制作精灵图在线工具

https://alloyteam.github.io/gopng/