定位布局position的具体用法

定位布局
position:
1.static:静态布局(当前元素在默认文档流中的位置 )
eg:写好一个div,div本身所处的位置

2.absolute:绝对定位
特点:
1.脱离默认文档流
2.不占据定位前空间
3.默认情况下,绝对定位元素根据body元素左上角进行定位(不要被元素本身的位置所迷惑)
4.当父元素具有定位属性时,子定位元素根据父元素左上角进行定位
配合属性:
当没有使用配合属性时,在原有位置飘起来
left
right
top
bottom

3.relative:相对定位
特点:
1.默认情况下,元素根据元素本身的位置进行定位
2.不脱离默认文档流
3.占据定位前空间

4.fixed:固定定位
特点和绝对定位相似
使用了固定定位的元素,不会随着滚动条的滚动而滚动

5.sticky:粘滞定位
relative+fixed
元素在到达固定点之前,使用relative定位,在到达固定点之后,使用fixed定位

与float的区别:
float:不会遮挡文字,但是position:absolute会遮挡文字
注意
对于粘滞定位,一定得有滚动条,所以不可以给父级元素设置overflow:hidden
比如,article 下面的section要粘滞定位,article就一定不能使用overflow:hidden属性

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页