一、CSS定位是什么
CSS布局是在电脑屏幕内的；CSS定位是垂直于电脑屏幕的。
二、background
在一个盒模型中，background包括content、padding和border。
三、一个div里的高低关系
1、content，border和background
已知，content肯定在background上面，border肯定也在background上面，那content和border的高低关系呢，也就是内容能不能遮住border？ 答案是content高于border，content可以遮住border。
以下为证明：
- content
- border
- background
2、content和浮动元素
content分为行内子元素（包含文字内容）和块级子元素。
（1）内联子元素vs块级子元素
内联子元素高于块级子元素
（2）内联子元素vs浮动元素
内联子元素高于浮动元素
（3）浮动元素vs块级子元素
浮动元素高于块级元素
3、总结
一个div中的高低关系为：（以下从高到低排列）
- content中的内联子元素（包括文字内容）
- 浮动元素
- content中的块级子元素
- border
- background
理解浮动元素：脱离文档流，跳起来，比之前稍微高一点，不在文档流里面了，比文档流稍微高了一点点。
content中的内联子元素（包括文字内容），content中的块级子元素，，他们的内容还是按照顺序，后出现的覆盖先出现的. 等，，学了问。
四、CSS属性———position
（一） static：默认值，待在文档流当中。
（二） relative：相对定位，升起来但不脱离文档流。
1. 使用场景
- 用于做位移（很少用）
- 用于给absolute元素做爸爸
2. 与CSS属性z-index配合使用
- 把需要操作的元素都先写上
poistion: relative; - auto:默认，计算出来的值是0
- 0：
- 数字大的高于数字小的
- 整数（正负数，0均可）
- 永远别写z-index:9999
（三） absolute：绝对定位，定位基准是祖先元素里的离它最近的一个定位元素（即非static元素）。
1、使用方法
- 以谁为基准(祖宗中的定位元素（非static元素），可以是爸爸、爷爷）就在谁里面加入
position: relative;，在自己里面写position： absolute; - 用
top、bottom、left、right等来定位（一定要写至少两个。 否则有些浏览器显示的位置会错乱）
2、使用场景
（1）脱离原来的位置，另起一层。比如对话框里的关闭按钮。
（2）鼠标提示
3、与CSS属性z-index配合使用
- 和relative的用法一样，而且不管position的值是relative还是absolute，z-index的作用都是一起的，不会relative的和relative的重叠，absolute的和absolute的重叠
4、经验
- 查看hover
- 善用
left:100% - 善用
left:50%和负margin
（四） fixed：固定定位，定位基准是viewpoint。
1、viewpoint视口
2、使用场景
- 烦人的广告，广告永远在视口的固定位置
- 回到顶部按钮
3、与CSS属性z-index配合使用
4、经验
- 手机永远别用这个fixed，一亿个bug然后会引出十亿个bug，然后996就来了。
- 在父元素里加了某些属性，这个fixed就会失效。（CSS自己打自己脸？）
（五） sticky：粘滞定位。
五、层叠上下文
一 定义
又称堆叠上下文。每一个层叠上下文就是一个工作域，只有一个工作域里的z-index才可以互相比较。不同工作域的z-index无法比较。
二、可以创建一个层叠上下文的属性
- 文档根元素
<html>； position值为absolute（绝对定位）或relative（相对定位）且z-index值不为 auto 的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；- flex (
flexbox) 容器的子元素，且z-index值不为auto； - grid (
grid) 容器的子元素，且z-index值不为auto； opacity属性值小于 1 的元素;transform属性值不为none的元素
注：想要获取更多内容，请Google搜索“MDN 层叠上下文”
