CSS:position的使用

在编写css时经常用到position属性，position主要是控制元素布局中的定位机制，默认情况是static，但是还是会随着正常流中的默认位置偏移。它还有其他几种属性：

• fixed
• relative
• absolute
• inherit

下面依次说明介绍一下。

绝对定位

• fixed
• absolute

相对定位

• relative

无定位

• static
  至于inherit,并不是很熟，查阅了一下：>inherit 规定应该从父元素继承 position 属性的值。
  [来源] (http://www.w3school.com.cn/cssref/pr_class_position.asp)

fixed

fixed是一种绝对定位，它的特点是相对于浏览器窗口定位，一般调整位置时用到的属性是top,bottom,right,left.(一般我们制作网站时，常常要考虑网站的缩放元素位置不变，这个时候，个人比较喜欢用的就是fixed了。不过这个有个不便之处，就是位置是定死的，之后修改啥的，会比较麻烦（当然了，目前还没找到其他的解决方式，都是把位置定死的，如果大神们有其他的解决方式，麻烦告诉我一下）。另外，目前比较流行响应式设计，boostrap的响应式设计个人感觉还是很强大的，大家可以去他们的官网看看，这里附上一个链接好了 但是在网页缩放都不改变位置上，还是要避免响应式设计。

absolute

这也是一种绝对定位。相对于不是static的第一个父元素进行定位，主要也是top,bottom,left,right属性来更改（具体的之后会补充更新）

relative

相对定位，相对于正常定位的元素进行定位。
<h1>正常定位的标题</h1>
<h2 style=`position:relative;left:-20px`>是向左移动20px</h2>
<h3 style=`position:relative;left:20px`>向右移动20px</h2>

#######效果可以类似模拟一下
<strong> 正常定位的标题</strong>
<strong>是向左移动20px</strong>
<strong>向右移动20px</strong>
至于inherit,用的很少，据说是从父元素继承 position 属性的值。IE对其的兼容性并不客观……

<strong>菜鸟新手，不足之处请指正补充！后续学习了会更新哒~~~</strong>