关于CSS中定位的个人理解

以前看到过一句话，大意是CSS世界其实是“流”的世界。现在偶然想起，便觉得很有道理。

1.那么什么是“流”呢？

　　也许你见过大海或者大河，里面的水是流动的。或许，我们可以将其理解为“流”。在CSS中，我们同样的也可以将html文档比作大海，也就是将html文档看成流。

 

2.什么是固定定位（fixed）呢？

　　在前面提到，我们将整个html文档看成是大海，那么固定定位的元素可以类比于大海中的小岛，这些小岛的位置是不动的，不会随着水流的方向而发生移动。

 

3.什么是静态定位(static)呢？

　　　海上的漂流瓶总是沿着水流的移动而移动，这就可以看作是一个静态定位。

 

4.什么是相对定位（relative）呢？

　　　相对，所谓相对那么就需要一个参照物了？那么这个参照物是什么呢？毫无疑问，这个参照物就是自身。相对定位的元素我们可以将其看成是在海里面航行的船。如果不给船提供动力，那么它就将像漂流瓶一样沿着水流的方向而发生移动。在我们给它添加动力之后，（添加动力，我们可以将其理解为元素添加：position:relative 属性）它就可以沿着自己的航线发生移动，与本应该随着水流的移动相比，它的位置就发生了变化。

 

5.什么是绝对定位（absolute）呢？

　　我们都知道，绝对定位的元素是需要依托于一个已经定位的父级元素的。在第4点中我们，相对定位的元素我们可以将其看成是在海里面航行的船，那么绝对定位的元素我们就可以将其看成是船上的物品，比如说驾驶室。我们知道，驾驶室在船上的位置是始终不变的，就像在那里长了根一样。

 

　　

转载于:https://www.cnblogs.com/iamsmiling/p/10609624.html