css中定位的使用

[复制链接]
查看1444 | 回复0 | 2020-7-23 13:43 | 显示全部楼层 |阅读模式
1.4种定位方式:静态、相对、绝对、固定
2.4种边偏移属性:left、right、top、bottom
注意:偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 (向下走)
1.静态定位
所有标准流都是静态定位
语法:position:static
总结:
        1.工作中用的比较少,因为加了静态定位,元素也是标准流
        2.偏移值对静态定位无效
使用场景:通常是将已经设置过定位的元素还原成标准流
我们以后所说的定位不包含静态定位
2.相对定位
相对于自身在标准流的位置进行定位移动        
语法:position:relative
总结:
        1.相对定位参考自身在标准流中的位置进行偏移,移动的出发点是自身标准流的位置
        2.不会对标准流的元素造成影响,没有脱离文档流,移动之后,自身在标准流中还占有空间,真正占得位置还是标准流的位置(灵魂不在 肉体永驻)
        3.可以盖在标准流的上方
使用场景:微调元素和配合绝对定位来实现效果
3.绝对定位
从父元素一直往上找设置过定位的直系父元素,作为自己的偏移参照物,找不到就继续往上找,直到html停止
语法:position:absolute
总结:
        1.偏移位置参考设置过定位(相对/绝对/固定)的直系父元素或直系祖宗元素,没找到就一直往上级找,直到html
        2.会脱离标准流,不再继承父级的宽度(不论是块元素还是行元素,盒子的大小取决于其中内容),可以定义宽高,不占据标准流的空间
        3.margin:auto对于设置过绝对定位的元素不起作用
        4.设置方向偏移的时候,横向或者纵向只设置一个即可,设置多个没有意义
使用场景:配合相对定位使用(一般都会配合相对定位,但不是绝对的都是相对定位)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16