position 总结

今天在看前端资料的时候，发现了慕课网有课程是专门讲position的，之前也有用过position，但总觉得缺些什么，了解不够深刻，今天在看视频的时候，又有了新的理解，在这里整理一下。

附上慕课网的定位讲解，有兴趣的小伙伴也可以去看看

https://www.imooc.com/learn/931

position定位的类型

5种定位类型：static | relative | absolute | fixed | inherit

• static（default）
  按元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

• relative
  元素框偏移某个距离。元素仍保持其定位前的形状，并且它原本所占的空间仍保留。

  relative定位是以元素的最初位置进行偏移的

<div class="test"></div> 

• absolute
  元素框从文档流中完全删除，即元素原先在正常文档流中所占的空间会关闭，就像该元素原来不存在一样

  absolute定位是以当前视口位置的原点为基准位置进行偏移

  
  

• fixed
  元素框的表现类似于将pisition：absolute，也会完全从文档流中去除，不过其包含块是视窗本身。

• inherit
  从父元素处继承pisition属性的值