深入理解css系列：css定位

一.概述

1.默认文档流定位方式

　　（1）.HTML默认文档以流模式定位，即内容元素按照先后顺序依次上下定位；

　　（2）.HTML标签元素总体分为块状元素、内联元素、内联块状元素，可通过该标签对应的DOM节点的display属性进行查看默认值，display值的不同决定了他们各自在默认文档流中的定位方式的不同；

　　　　以下为position的可能值。

　　　　none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline：指定对象为内联元素。

　　　　block：指定对象为块元素。

　　　　list-item：指定对象为列表项目。

　　　　inline-block：指定对象为内联块元素。（CSS2）

　　　　table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）

　　　　inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）

　　　　table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）

　　　　table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）

　　　　table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）

　　　　table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）

　　　　table-column：指定对象作为表格列。类同于html标签<col>（CSS2）

　　　　table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）

　　　　table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）

　　　　table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）

　　　　run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）

compact：

分配对象为块对象或基于内容之上的内联对象。（CSS3）

如果run-in元素包含了一个块级元素，run-in元素将变成块级元素；

如果块内有一个块级元素（非float和position定义）紧跟run-in元素之后，run-in元素将变成块内第一个内联元素；

一个run-in元素不能插入开始已有run-in元素或者本身就是run-in元素的块中；

其它情况下，run-in元素都将是一个块级元素。

ruby：

将对象作为表格脚注组显示。（CSS3）

ruby-base：

将对象作为表格脚注组显示。（CSS3）

ruby-text：

将对象作为表格脚注组显示。（CSS3）

ruby-base-group：

将对象作为表格脚注组显示。（CSS3）

ruby-text-group：

将对象作为表格脚注组显示。（CSS3）

-->    　　  box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

　　　　inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

　　　　flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

　　　　inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）

　　　　flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

　　　　inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

　　（3）.块状元素单独占据一行，可设定他的宽高值。内联元素与紧挨着的内联元素（如果存在）共同占据一行，直到元素内容到达视口的最末端则换行继续以该种方式定位，内联元素不可以设置宽高。内联块状元素定位方式与内联元素相同，但不同的是有块状元素的特性即可以设定他的宽高。

2.定位方式

　　（1）.CSS 有三种基本的定位机制：普通流、浮动和position定位。

　　总结来看：CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

二.四种position定位方式

　　1.static 静态定位

　　static方式即默认的方式，按照流式布局定位。

　　2.relative 相对定位

　　在理解默认流式布局定位的基础上，来看这种定位方式。

　　（1）.“相对”指的是相对于自身本来在默认流中的位置，将其position属性设置为relative后，再通过top,bottom,left,right属性对其进行相对于原来位置的偏移;

　　（2）.该元素偏移后，他本来在默认文档流中占据的空间依然存在，其紧挨其后的元素的定位依据他本来位置进行定位。

　　（3）.该元素偏移后，可能存在覆盖其他元素的情况，所以可以通过z-index属性设置显示层级有限级别。

　　3.absolute 绝对定位

　　通过与relative相对定位进行比较的基础上，来看这种定位方式。

　　（1）.“绝对”指的是绝对定位的元素已经脱离了文档流，普通流中其它元素的布局就像绝对定位的元素不存在一样；

　　（2）.绝对定位的元素还是要相对于某个对象进行定位，而这个对象可以简单归纳为“绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块”，

　　（3）.因为绝对定位的框与文档流无关，所以它们也可以覆盖页面上的其它元素。

　　4.fixed 固定定位

　　元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。即无论页面左右上线如何滚动，该种定位方式的元素都会根据你当前的视窗本身进行定位，大多应用于像类似侧栏的客服链接、底部的回到顶部按钮等需要在页面上一直显示并且其位置不会变化的元素。

三.float 浮动定位

　　float浮动定位可谓大杀器了，会用的人得心应手而且使用的很优雅，不明就里的人则各种混乱。

关于float的讲解w3school上的这篇http://www.w3school.com.cn/css/css_positioning_floating.asp文章已经很详细了，我也没有必要再重复造轮子了。以后在实际项目中如果碰到关于float的坑的话可以再单独进行整理，比如现在已经遇到的清除浮动的各种方法。

完。