定位
定位：手动控制元素在包含块中的精准位置
position属性
-默认值： static，静态定位(不定位)
-relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
脱离文档流后：
1.文档流摆放时，会忽略脱离了文档流的元素
2.文档流元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置偏移
（大多给绝对定位元素提供包含块）
偏移
四个属性设置其位置
-left
-right
-top
-bottom
出现矛盾的时候 以左 上为准
与margin区别: margin会使盒子整体变短
盒子的偏移不会对其他盒子造成影响（只视觉效果）
绝对定位
1.宽高为auto时 适应内容
2.包含块变化：找祖先元素中 第一个定位 元素，该元素的填充盒为其包含块 eg.left:0; 就左对齐到上一个定位元素 若找不到 则它的包含块为整个网页（初始化包含块）
关键在找到包含块在哪
固定定位
其他情况和绝对定位完全一样
包含块不同：固定为视口（浏览器的可视窗口） 能看见的网页面积 视口不会变
（网页广告）
定位下的居中
某个方向居中：
1.定宽（高）
2.将左右（上下）距离设置为0 -right -left 为0
3.将左右（上下）margin设置为auto
margin 吸收完剩余空间
多个定位元素重叠时z-index
堆叠上下文
设置z-index（z坐标轴）
值越大 越靠近用户
只有定位元素设置z-index有效
z-index 可以是负数 常规流浮动流 覆盖负数元素
.a{z-index: 1;} .b{z-index: 0;}
.a在.b之上
补充
1.绝对定位 固定定位 一定是块盒
相对定位不影响盒属性
2.绝对定位 固定定位 一定不是浮动元素 加float没用
3.定位没有外边距合并
@规则
放在.css文件中
at-rule @规则 @语句 css语句 css指令 （不同翻译）
import
@import"路径"；
导入另外一个css文件
类似在html里 link
先解析 @ 中的css 同link顺序
charset
@charset “utf”
告诉浏览器字符编码
必须写第一行
同html里的utf-8