css的定位有：
1、普通流定位
普通流定位又称为“文档流定位”，即页面中默认的定位
特点： 所有的元素默认从其父元素左上角开始出现；所有的块级元素，按从上到下排列，每个元素独占一行；页面中行内元素，按照从左到右的方式排列，一行显示不下则换行。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #d1{ width:100px; height:100px; background:pink; } </style> </head> <body> <div id="d1">我是块级元素div</div> <span style="background:yellow">我是行内元素span1</span> <span style="background:green">我是行内元素span2</span> <p style="background:greenyellow">我是块级元素p</p> </body> </html>
2、浮动定位
页面中所有的元素都可以设置浮动
float：left/right/none/both
特点：将元素排除在普通流之外，即脱离文档流，那么元素将不再页面占据空间，但是元素依然在页面中显示，而且后面没有浮动的元素要上前占位;浮动元素会停靠在其父元素的左边或者右边，或其他已经浮动元素的边缘上；浮动元素处理的问题，让块级元素能够在一行显示‘浮动元素只能在当前行显示。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ float:left; width:100px; height:100px; } #d4{ float:right; } </style> </head> <body> <div id= "d1" style="background:greenyellow"></div> <div id= "d2" style="background:yellow"></div> <div id= "d3" style="background:pink"></div> <div id= "d4" style="background:gray"></div> </body> </html>
注意：浮动定位会引发特殊的效果，如果一行显示不下所有的浮动元素，那么最后一个会换行，但是可能被卡住，是由于上一行某个浮动元素的高度比其他的都大，所以，换行的浮动元素被卡住；元素一旦浮动，宽度则以内容为准，当然前提是没有设置宽度；元素浮动后，该元素将变成块级元素，可以设置高度和宽度（行内元素设置宽高是无效的，行内元素设置宽高有效）；
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #s1{ background:pink; width:200px; height:100px; } #s2{ background:yellow; width:200px; height:100px; float:left; } </style> </head> <body> <span id="s1">我是没有浮动的span</span> <span id="s2">我是浮动了的span</span> </body> </html>
******有一个问题**** 没有浮动的元素并没有压在浮动的元素下，是因为图片，文字，行内块元素，采用的是“环绕”的方式排列，是不能被浮动压在下面的。
*****清除浮动*** clear:none/left/right/both ---> 清除当前元素前面的一个元素浮动带来的影响
****浮动元素对父元素的影响*****：
由于浮动元素不占据页面空间，所以他也就不占据父元素高度
解决方法：
直接设置父元素的高度，不好的一点就是有时候并不知道父元素的高度；
将父元素也进行浮动设置，不好的一点就是不是所有的时候都要对父元素进行浮动设置，而且父元素浮动，对他后面的元素位置也会有影响；
为父元素设置overflow：hidden/auto(overflow可以做溢出处理，也可以撑起浮动元素的父元素的高度)，不好点一点，有需要溢出显示时会被隐藏；
clear所有的浮动:both,在父元素中追加一个空的块级元素，并设置clear为both;
*******定位*********
定位方式属性：
position：static/relative/absolute/fixed
如果取值为relative/absolute/fixed其中的之一 ，则该元素则被称为“已定位元素”
偏移属性：
作用：为了修改“已定位元素”的位置
属性：top 以元素的上边为基准变，改变元素的偏移距离
bottom 以元素的下边为基准变，改变元素的偏移距离
left 以元素的左边为基准变，改变元素的偏移距离
right 以元素的右边为基准变，改变元素的偏移距离
向内的都是正直，向外的都是负值。
堆叠顺序
修改“已定位元素”们之间的堆叠效果，层叠顺序
属性：z-index (值为无单位的数字)
该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。
3、相对定位
position:relative
一般配合偏移属性实现定位
元素相对于自己原来的位置发生的位置的改变，而且该元素原来占据的位置依然保留，不会被其他元素占据
使用于元素位置的微调
4、绝对定位
position:absolute
一般配合偏移属性来实现定位
特点：脱离文档流，不占据页面空间，会压在其他元素之上
绝对定位的元素会相对于离他最近的、已经定位的祖先元素来实现位置的初始化
如果元素没有已定位的祖先元素，那么他则会相对于body来实现初始化
******小窍门*****
一般情况下，绝对定位的元素一定会有一个已经定位了的祖先元素，多数都是由直接父元素来充当这个已经定位了的
影响：
脱离文档流
绝对定位的元素会变成块级元素
margin可以正常使用，但是左右auto值失效
绝对定位的元素将left、right、bottom、top设置为0的情况下，会使整个元素变得绝对居中，（auto只对左右有效）
5、固定定位