css定位的简单总结

　　关于css的定位，相信初接触css的同学都头疼不已。相对定位、绝对定位连名字都这么像，用起来更是一会被遮住一会被挤出去，踩了很多坑之后，对css的定位进行一个简单的总结，以免重蹈覆辙。

　　其实掌握好几种定位的不同概念，加以练习可以很好的分清楚其中的差别和相似之处。做到游刃有余，任他萍踪侠影，但万变不离其宗。

　   定位（position）总共有5种，分别是：absolute、relative、 fixed、 static、 inherit。

　　1、absolute:

　　绝对定位，脱离正常的文档流。其周围的元素将会忽略它的存在。它定位的参照物是离它最近的postion不为static的父元素。即直接父元素如果不符合要求会一直向上追溯到满足条件的父元素为止，直到最上层的window对象。

　　2、relative：

　　相对定位，元素遵循正常的文档流，所以周围元素不会忽略它的存在。对其进行移动时参照物是文档流中本身原来的位置，即相对原来的位置移动一段距离。

　　3、fixed：

　　与绝对定位很类似，区别在于，固定定位的参照物始终是最外层的window对象，因此，并不会随屏幕移动而移动。

 　  4、static

　　static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。

　　5、inherit

　　inherit简而言之，即继承父元素的 position 值，其特性就和父元素的特性相同。

　　参考文章：https://segmentfault.com/a/1190000000467348

转载于:https://www.cnblogs.com/pqjwyn/p/5364310.html