浅谈绝对定位:absolute与相对定位:relative

绝对定位（absolute）:
1. 以浏览器左上角的为参考点设置位置。
2. 与浮动一样不占据空间位置。
3. 嵌套的盒子，父元素无定位，子元素绝对定位，子元素仍然参照浏览器。
4. 父元素绝对定位，子元素绝对定位，子元素以父元素为参考点。
5. 给行内元素绝对定位之后就转化为行内快了。
6. 可以设置z-index[调整元素的层叠顺序]值的范围是:0-999，值大的在上方。
相对定位（relative）:
1. 非常自恋，它的定位参照的是它自己。
2. 与绝对定位相反它仍占据原来的位置也即不脱离标准流，非常的霸道。
3. 工作中最常使用的就是“子绝父相”，父盒子相对定位，子盒子绝对定位。然后设置子盒子的left,right,top,bottom的值，比如一些电商网站的精灵图定位。简而言之就是父盒子先定位好，其他元素不会抢占位置。
4. 行内元素相对定位后不会转化为行内块。

上文提到了，行内元素和行内块元素，那么二者的区别是什么呢？
html标签根据其显示模式分为三类：

• 块级标签<div> <p> <h1><h6><ol><ul><dl><table><address><blockquote>等。
  特点：
• 一个块元素独占一行。
• 元素的行高以及顶和底边距都可设置。
• 元素宽度在不设置的情况下，是它本身父元素的100%，除非设定一个宽度。
  2.行内元素：<a> <span> <br> <i> <em> <strong> <q> <var> <code> <cite>等。
  特点：
• 和其它元素都在一行上。
• 元素的高度以及顶部和底部边距不可设置。
• 元素的高度就是他所包含的图片或文字的宽度。
  3.行内块：<img> <input>等
  特点：
• 同时具备行内元素和块元素的优点。
  小窍门：将行内元素转化为行内快可使用display:block,反之display:inline.最省事的就是直接写display:inline-block.