css定位分类

1、普通定位和相对定位
css中的元素有两种元素，块级元素和行级元素，块级元素每定义一个，第二个会自动换行，行级元素不会换行。如下图定义了三个块级元素div和两个行级元素span。

普通定位就是从上到下从左到右依次排布的布局。

 

普通定位代码

相对定位是在普通定位的基础上作出一些变动，如本来这个元素应该在第二行的位置，设置position:relative,bottom:20px;他就会在原来普通定位中应处于的位置的基础上距离底部上浮20px;

他的位置浮动会使他的位置变化，但是他原本处于的文档空间不会改变。

比如相对定位使得本在第二行的元素div上浮了一行的高度，则他会和本来在第一行的元素叠加，但是他在第二行的位置还是会空在那里，下一个块级元素会从第三行开始布局。代码和效果如图

 

相对定位代码

2、绝对定位和fixed定位
这两种定位都不占据文档空间，所以如果是普通流的元素遇到这些定位的元素会产生叠加情况。浮动元素也不占据文档空间

绝对定位是相对最近一个已经定位的祖先元素定位的，如果最近没有定位的祖先元素，则根据根元素定位。可以用来做提示框或者下拉搜索框。

绝对定位代码

1、第一个空白背景框的div的祖先元素td已经使用了相对定位，虽然位置没有便宜，但是他的绝对定位是在哪个td元素的基础上进行定位的。

2、666的定位也是绝对定位，但是他没有已经定位的祖先元素，所以他的绝对定位是相对于根元素定位的。

3、空白框元素虽然占了很大的空间，但是背景灰色并没有铺满他所占的高度，这就是不占据文档空间，反观上面的普通定位和相对定位，都铺满了内含元素的背景。

fixed元素就是固定在浏览器某个位置的元素，绝对定位是固定在页面的，如果滚动滚动条的话绝对定位的元素也会滚上去，fixed元素不会。

通常用来写导航条或者回到顶部等。代码和效果如图。

fixed定位代码

 

fixed定位效果