1. 标准流(文档流)
在没有使用任何定位和浮动情况下,Html中块元素从上到下排布(每个块独占一行,自带换行),内联元素从左到右排布。
2.几种常见定位
1、静态定位(static)
一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。
静态定位的元素不会受到 top, bottom, left, right影响。
2、绝对定位(absolute)
absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。
它有一个重要的限制条件:定位基点(一般是父元素)不能是static定位,否则定位基点就会变成整个网页的根元素html。
另外,absolute定位也必须搭配top、bottom、left、right这四个属性来定位。
3、相对定位(relative)
relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。
它必须搭配top、bottom、left、right这四个属性一起使用,用来指定偏移的方向和距离。
4、固定定位(fixed)
fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。
5、粘性定位(sticky)
sticky跟前面四个属性值都不一样,它会产生动态效果,很像relative和fixed的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。
sticky生效的前提是,必须搭配top、bottom、left、right这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。
6、浮动定位(float)
float 属性定义元素在哪个方向浮动,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素(html大部分元素都是不可替换元素),则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
3、对比:(精华!!!!要理解透!!)
不脱标元素:静态定位的元素和相对定位元素占在标准流中的空间(相对定位元素在)。
是否在标准流中 | 能否使用top、bottom、left、right | 是否还占标准流的空间 | 在未使用top等定位下元素的位置变化 | top、bottom、left、right定位的基点(参照点) | |
静态定位(static) | 在标准流中 | 不能使用top、bottom、left、right | 占空间 | 默认标准流位置 | / |
绝对定位(absolute) | 脱离标准流 | 必须使用top、bottom、left、right | 不占空间 | 紧邻最近不脱标的元素 | 父元素不是stastic就为父元素否则就是html根元素 |
相对定位(relative) | 在标准流中 | 必须使用top、bottom、left、right | 占空间 | 紧邻最近不脱标的元素 | 基点为最近不脱标的元素位置 |
固定定位(fixed) | 脱离标准流 | 可以使用top、bottom、left、right | 不占空间 | 紧邻最近不脱标的元素 | 基点是浏览器窗口 |
浮动定位(float) | 脱离标准流 | 不能使用top、bottom、left、right | 不占空间 | 紧邻最近不脱标的元素 | / |