定位与锚点

CSS有三种基本的定位机制(了解) :

普通流元素的类型决定 了其在HTML中的位置(低)

浮动流添加了浮动的元素会脱离文档流（中）

定位流相对定位是根据普通流移动,绝对定位和固定定位脱离普通流（高）

1.定位： position

属性值 ：left 、 right 、top、 bottom              static 默认位置 左上角 \

相对定位 ： relative;        参照物 ：以原来的 位置作为参照物。（当前元素在文档流中所占的位置）（相对于本身）         特征： 元素 进行定位，所占位置 在 文档流中不变。

定位属性: position:

1. position:static 静态定位(默认值) 默认位置 左上角 2. position:relative 相对定位 参照物 ：以原来的 位置作为参照物。（当前元素在文档流中所占的位置）（相对于本身） 特征： 元素 进行定位，所占位置 在 文档流中不变。 3. position:absolute 绝对定位 参照物：默认是文档流 如果有包含快，则是以最近（具有层级）的包含块为参照物。 特征：完全脱离文档流 4. position:fixed 固定定位 参照物：浏览器可视窗口 特征：完全脱离文档流 5. position:sticky 粘性定位 （吸顶定位） 常用于吸顶效果 参照物：触发滚动条之后相当于参照物:没有触发滚动条时相当于"relative ”,触发滚动条之后相当于fixed 特征：完全脱离文档流 z-index 层叠样式（只有添加定位属性的元素才生效） 默认值： 0 数值越大，层级越高， 支持负数

包含块 ===参照物             对于绝对定位:默认包含块是body,可以改变包含块

2.锚点

锚点：实现当前页面的跳转     语法： 1. id名                 2. #+id名

vertical-align : 垂直对齐方式 middle 居中 top 顶部对齐 bottom 底部对齐 baseline 基线对齐 注意： 只有行内块元素支持该元素