前端培训丁鹿学堂:css布局之定位总结

93 阅读2分钟
标准流:

默认情况下元素是按照标准流布局的:也就是从左到又,从上到下的顺序。元素之间并不会出现层叠(覆盖)的现象。

在标准流布局中,可以使用margin,padding对元素进行定位。

定位

定位让元素脱离文档流,具有不同的行为:可以层叠在一个元素上面,或者使用固定在页面的某一个位置。 position属性可以对元素进行定位。

常用的有5个:static relative absolute fixed sticky static :默认值。静态的,就是标准流。

相对定位

psition:relative 是相对定位。 它的参照对象是自己原来的位置。相对定位元素可以通过left,top,right,bottom来控制自己的位置

应用场景:在不影响其他元素的情况下,对自己的位置进行微调。

固定定位

position:fixed是固定定位。

它的参照对象是视口,就是浏览器窗口。固定定位元素可以通过left,top,right,bottom来控制自己的位置

它的特点是当页面滚动时,固定定位元素保持不动。 应用场景:在不影响其他元素的情况下,对自己的位置进行微调。

绝对定位

position:absolute 是绝对定位。

绝对定位的相对位置是相对于距离自己最近的祖先的定位元素,如果逐级向上查找都没有定位元素的话,就是相对于视口进行定位。

也就是说绝对定位的相对位置是祖先元素中有relative,absolute,fixed的。 绝对定位也可以通过left,right,top,bottom进行位置的设置。

子绝父相:我们常用的开发定位思路,就是给父元素设置相对定位,再给子元素设置绝对定位,这样子元素就相对于父元素修改元素位置了

fixed和absolute的特点:

1可以随意设置宽高,不管你定位前是块级还是行内

2没有设置宽高的时候,宽高默认由内容决定。

3不再受标准流的约束,

4如果元素脱离了文档流,它父级的 高度则不会被元素撑开

5定位元素的内部子元素还是按照文档流来进行布局的。也就是说父级的定位并不会影响子级的文档流布局。

粘性定位:

position:sticky 相当于相对定位和固定定位的结合体。

本身和相对定位一样,当页面滚动到某个值的时候,它会变成固定定位。

在这个属性没出来的时候,往往利用js去判断页面滚动,滚动大于某个值时,变成固定定位。

缺点:兼容性差

position:sticky
top0px