7、定位和锚点

一、定位 position

1、static(默认值)     不定位，元素遵循html原则
2、absolute          绝对定位
  1）完全脱离文档流
  2）相对于包含块（定位父级）去进行定位，参考包含块的位置坐标，进行偏移
  3）元素在添加absolute但是没有添加偏移量时，他还会在原地，但是会脱离文档流
  口诀：子绝父相
3、relative     相对定位
  1）不脱离文档流，位置移动后，移动前所占空间仍然保留
  2）相对于自身初始位置进行定位
4、fixed        固定定位
  1）脱离文档流
  2）参照物为浏览器可视窗口，不随滚动条滚动
5、sticky       粘性定位
  1）不脱离文档流
  2）参照物是距离最近的滚动元素，当到达临界值时固定

二、偏移量

1、概念：设置了定位的元素（除static外）定位的参考依据，即向哪动，动多少
2、属性：
  top		上
  bottom	下
  left		左
  right		右
3：特点：
  top和bottom同时使用，top优先；left和right同时使用，left优先

三、定位属性的层叠性 z-index

1、定位规则
  1）定位元素会盖着未定位的元素
  2）如果都定位了，定位结构在后的盖着结构在前的
  3）若要改变遮盖顺序可以用z-index属性
2、z-index     定位属性的层叠
  1）z-index只对定位元素生效
  2）z-index属性值为number，可以为正，也可为负
  3）z-index越大，层级越高
  4）z-index默认值为auto，auto值<1

四、包含块

1）拥有定位的父元素就是一个包含块
2）元素添加absolute定位时，他会去看父元素是不是包含块，如果父元素是包含块则参照父元素定位进行偏移；如果父元素不是包含块则继续向上寻找包含块，直到body，如果都没有找到则针对当前屏幕进行偏移

五、关于浮动和定位的差别和用途

1、差别
  浮动半脱离文档流，relative不脱离文档流，absolute完全脱离文档流。
2、用途：一般主要用float和margin调整位置就够了，如果需要做重叠显示的模块，此时可以用position

六、元素在页面中水平垂直居中

1、方法一
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-元素高度的一半;
  margin-left:-元素宽度的一半;
2、方法二
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;

七、锚点/记

1、格式：
    <div id="id名"></div>
    <a href="#id名">链接文本或图片</a>
2、总结：
    利用a标签的跳转功能和id名的唯一性可以实现一个锚记效果。
    点击a标签，去到对应的模块。