css - 定位

定位:

定位=定位模式 + 边偏移

 

相对定位(relative):

移动的时候是依照自己原来的位置,原来标准流的位置继续占有,后面的盒子仍然以标准流的方式待他

    元素 {
        position: relative; 定位模式
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

 

绝对定位(absolute):

移动的时候是依照自己的父元素来移动位置的,如果没有父元素就会依照游览器文档来移动位置

需要子元素约束在父元素内,父元素就需要加定位,不然子元素会依照游览器我的为移动位置

如果祖先元素有定位,则以最近一级的有定位祖先元素为参考点移动位置

绝对定位不在占有原先的位置

    元素 {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

 

子绝父相:子元素加绝对定位,父元素加相对定位(绝对定位不占据原来的位置,相对定位占据原来的位置)

 

固定定位(fixed):

固定于游览器显示的区域,不会随着页面的滚动而移动,固定定位是固定的

不占有原来的位置

    元素 {
        position: fixed;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

 

 

定位的顺序问题:

 

 

posted on   每天积极向上  阅读(29)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示