定位

我们这里要说的定位，不是公司定位，不是网站设计风格定位，更不是什么大明星人设定位，而是CSS中的定位——position属性。

定位属性可以用来控制元素的位置。

定位position的值有absolute、fixed、relative、static和inherit。他们的含义如下如所示：

（图片来自W3School）

当 position 为 static 或 relative，并且 float 为 none 时会触发常规流。

常规流分为两种情况：

静态定位(static positioning), position 值为 static , 盒的位置是常规流布局里的位置。

相对定位(relative positioning), position 值 为 relative, 盒偏移位置由这些属性定义 top, bottom, left and right 。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

例如：

.mybox {

position: relative;

left: 20px;

top: 20px;

}

（图片来自CSS Mastery）

上例中Box2相对于自身原来的起点发生偏移，但是原来的位置虽然空出来了却依然保留。

对于绝对定位方案， 盒从常规流中被移除，不影响常规流的布局。 它的定位相对于它的包含块，相关CSS属性： top,bottom, left 及 right 。

如果元素的属性position为 absolute 或 fixed，它是绝对定位元素。

固定定位元素(fixed positioned element)也是绝对定位元素，它的包含块是视口（viewport）。当页面滚动时它固定在屏幕上，因为视口没有移动。

例如：

nav {

background-color: #666;

height: 40px;

width: 100%;

font-size: 18px;

color: #FFF;

position: fixed;

line-height: 40px;

text-align: center;

}

滚动条滚动时，导航菜单依然在屏幕相应位置。

设置为绝对定位的元素框从常规流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在常规流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

例如：

.mybox {

position: absolute;

left: 20px;

top: 20px;

}

（图片来自CSS Mastery）

上例中设置为绝对定位后，Box2脱离原来的常规流，原来占用的空间不保留，后面Box3便占据此空间。而Box2相对元它的包含块发生偏移。