有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css绝对定位和固定定位相对定位的区别

代码编程 cat 12个月前 (10-20) 32次浏览 已收录 0个评论 扫描二维码
定位模式:
position
    relative;相对定位
    absolute绝对定位
    fixed 固定定位
    static 静态定位(没有定位)
边偏移:
    left
    right
    top
    bottom
    通常水平方向控制left或right
    垂直方向控制top或bottom
    元素的【外边距】相对于包含块的距离
    px
    百分比

绝对定位:
* 相对于最近的【定位父级】进行定位
定位父级——有定位属性(relative,absolute,fixed)的父级
如果没有定位父级相对于根元素html定位
基础特性:
不定义偏移量时相当于原地漂起来
1)提升层级(高于浮动元素)
2)脱离文档流(原来位置不再占位)
应用:
1.作为绝对定位的定位父级
2.微调对齐
3.提升层级(相互覆盖的元素)

相对定位:
相对于元素原来位置进行定位(偏移)
基础特性
如果不定义偏移量【基本】对元素没有影响
1)提升层级(高于浮动元素)
2)不脱离文档流(原来位置仍然占位)
应用:
1.作为绝对定位的定位父级
2.微调对齐
3.提升层级(相互覆盖的元素)

固定定位:
始终相对于窗口定位
基础特性
不定义偏移量时相当于原地漂起来
1)提升层级(高于浮动元素)
2)脱离文档流(原来位置不再占位)
应用:
相对于窗口定位的元素
如:弹窗,跟随滚动的侧边栏(客服、返回顶部)

小总结:

绝对定位、固定定位:

1.脱离文档流

2.提升层级

3.可以使行内元素生成一个块级框(支持宽、高、padding,margin, border,text-align,tex-indent)

4.可以使未定宽度的块适应内容

5.包含浮动子元素不会出现高度塌陷

6.不出现margin值塌陷问题

7.浮动脱离文档流不脱离文本流所以会出现文本绕排既脱离了文档流又脱离了文本流,所以相当于完全不占位

相对定位:

1.不脱离文档流

2.提升层级

3.不定义偏移量时基本对元素没有影响 a.不改变元素本身的显示特性

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址