CSS 有三种基本的定位机制:普通流,浮动,绝对定位、相对定位、固定定位。
1、普通流:即默认文档流,除非专门指定,否则所有的元素内容都在普通流中遵循自上而下,从左到右的默认定位。
2、浮动:浮动的元素可以向左或向右移动,直到它的边框碰到此元素的父级边框或另一个浮动元素的边框为止。任何元素都可以浮动,而且不论它本身是何种元素,浮动后都会成为一个块级元素且脱离默认文档流(不完全脱离,会占据文本流位置,但不占据元素流位置)。
3、绝对定位:设置绝对定位的元素会完全脱离文档流,并相对于此元素最近的已定位祖先元素来定位,如果元素没有已定位的祖先元素,那么它就相对于最初的包含块(根据用户代理的不同,最初的包含块可能是画布或 HTML 元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级元素,而不论原来它在正常流中是何种类型的元素。
4、相对定位:设置为相对定位的元素会相对于其原来的位置偏移某个距离,元素仍然保持其未定位前的形状,它原本所占的空间仍保留即不会脱离文档流。
5、固定定位:元素的表现类似于绝对定位,不过其相对的是视窗本身(浏览器视图)。