CSS设计指南之定位

原文:CSS设计指南之定位

CSS布局的核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed。默认值为static。

一.定位类型

1.静态定位static

在静态定位的情况下，每个元素都处于常规文档流中。它们都是块级元素，所以就会在页面中自上而上的堆叠起来。

2.相对定位

到底相对哪里定位呢，相对的是它原来在文档流中的位置(或者说是默认位置)。

要注意，除了这个元素自己相对于原始位置挪动了一定的位置之外，页面没有发生任何变化。这个元素原来占据的空间没有动。

3.绝对定位

绝对定位跟静态定位及相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来，原来占据的空间会被"回收"。

从上图可以看到，绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素body在定位。而这自然而然的引起了一个关于定位的重要概念:定位上下文。

关于定位上下文，首先应该清楚的是:绝对定位元素默认的定位上下文是body元素。关于定位上下文的详细信息接下来再仔细说明。

4.固定定位

从完全脱离文档流的角度说，固定定位与绝对定位类似。但不同之处在于，固定定位的定位上下文是视窗(浏览器窗口或者手持设备的屏幕)，因此它不会随页面滚动而滚动。固定定位最常用的情况是创建不随页面滚动而滚动的导航元素。

二.定位上下文

在讲绝对定位的时候，我们了解到绝对定位元素默认的定位上下文是body元素，因为body是标记中所有元素唯一的祖先元素。而实际上，绝对定位元素的所有祖先元素都可以成为它的定位上下文，只要把相应祖先元素的position设定为relative即可。

如上图所示，可能会感觉非常奇怪，为什么inner元素的top、left属性没有起作用。原因在于，内外部div默认都是静态定位，它们之间不存在谁是谁的定位上下文这个问题。只有将元素的position属性设置为relative、absolute、fixed，这个元素的top、right、bottom和left属性才会起作用。

如上图所示，设置了内部div的position属性为absolute之后，内部div就会脱离原来的位置，默认相对于body重新定位。

如上图所示,设置了外部div的position属性为relative值之后，它就变成了内部div的定位上下文。此时内部div的top、left属性参照的就是外部div了。如果你再用left和top属性重新定位外部div，内部div也会跟着移动相同的距离，以保住它与外部div之间的位置关系。

事实上，只要把元素的外边距和内边距设定好，多数情况下只用默认的静态定位就足以实现页面布局了。很多刚接触CSS的初学者(include myself)都会错误的设定position属性,最终发现从文档流中挪出来的元素很难控制。因此，除非真需要那么做，否则不要轻易修改元素默认的position属性。

以上就是我所了解的关于定位的知识，不足之处欢迎指正，因为本人也是在学习交流之中。