CSS快速入门基础知识（六）

定位与锚点

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

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

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

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

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 基线对齐
注意： 只有行内块元素支持该元素