【CSS】定位类型与原理：相对定位-绝对定位-固定定位-粘性定位
定位类型
相对定位：position:relative,相对定位,元素仍在文档流中,受文档布局限制(源码顺序),只是相对原始位置发生了偏移而已。绝对定位：position:absolute,总是相对于一个固定的定位参考父级,父级中找不到定位元素，就继续向上找，直到html。固定定位：position:fixed,不是相对父级，总是相对于html定位(看成绝对定位的一个特例)。粘性定位：position:sticky = static + fixed 粘性定位 = 静态定位 + 固定定位。常用来做浮动置顶。参考代码
<!DOCTYPE 低价接各类项目系统搭建点我wcqh.cnhtml><htmllang=“zh-CN”><head><metacharset=“UTF-8”/><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”/><metaname=“viewport”content=“width=device-width, initial-scale=1.0”/><title>定位的类型与原理</title></head><body><!– ! 定位布局 * 1. 定位三个必知术语: 定位元素, 最初包含块(定位上下文/html), 参照物(1). 定位元素: position: relative / absolut低价接各类项目系统搭建点我wcqh.cne / fixed (2). 最初包含块: 包含了<html>的不可见的,但可感知的区块,大多场景下与”视口”表现一致,但并不相同 (3). 参照物: 自身, 祖先定位元素, 最初包含块 * 2. 页面坐标系 (1) 与数学坐标每系不同 (2) 以左上角为起始点,坐标(0,0) (3) 向右, X 变大, 向下, Y 变大 (4) 页面四个顶点用: top,left,right,bottom表示 * 3. 定位类型: 相对, 绝对, 固定, 默认静态 (1). 相对定位: position: relative (2). 绝对定位: position: absolute(3). 固定定位: position: fi低价接各类项目系统搭建点我wcqh.cnxed (4). 静态定位: position: static (浏览器默认,即文档流布局) * 4. 定位元素: (1): 定义: 也叫”可定位元素”,即可以在文档流中自定义元素的排列方向 (2): 属性: position: relative / absolute / fixed,即 非static即可 * 5. 定位参照物: (1): 相对定位: 相对于”自身在文档流中的位置” (2). 绝对定位: 相对于”距离它最近的定位元素的位置”,即常说的”定位父级”,逐级向上直到最初包含块 (3). 固定定位: 总是相对于”最初包含块”定位 –><!– 1. 相对定位 –><divclass=“box bo低价接各类项目系统搭建点我wcqh.cnx1″><divclass=“item relative”>相对定位</div><div>Hello</div></div><style>.box { border:1px solid #000; height:200px; width:200px; background–color: lightcyan;}.item { height:50px; width:100px; border:1px solid #000;}/* 相对定位 */.box.box1 .item.relative { background–color: lightgreen;/* 默认静态定位 */ position:static;/* 将文档流中的元素转低价接各类项目系统搭建点我wcqh.cn为”定位元素” *//* position: 只要不是static; */ position: relative; top:20px; left:20px;/* 相对定位,元素仍在文档流中,受文档布局限制(源码顺序) *//* 只是相对原始位置发生了偏移而已 */}</style><hr/><!– 2. 绝对定位 –><divclass=“box box2”><divclass=“item absolute”>绝对定位</div></div><style>.box.box2 .item.absolute { background–color: wheat;/* 绝对定位 */ position:absolu低价接各类项目系统搭建点我wcqh.cnte;/* 定位偏移量 */ top:20px; left:20px;/* 绝对定位元素,总是相对于它的祖先定位元素进行定位 *//* ! 因为父级没有定位元素,所以逐级向上查询,直到html */}/* 我们将它的父级转为定位元素 */.box.box2 {/* 实际工作中, relative用得极少, 除了当定位参考父级 */ position: relative;/* position: absolute; */}/* 垂直水平居中 */.box.box2 .item.absolute { top:0; left:0; right:0; bottom:0; margin:auto;}/* .box.box2 .低价接各类项目系统搭建点我wcqh.cnitem.absolute { transform: translate(25%, 75%); } */</style><hr/><!– 3. 固定定位 –><divclass=“box box3”><divclass=“item fixed”>固定定位</div></div><style>.box.box3 .item.fixed{ background–color: violet; width:100vw;/* 固定定位,总是相对于一个固定的定位参考父级,html */ position:fixed;/* top: 0; left: 0; */ right:0; bottom:0;}.box.box3 {/低价接各类项目系统搭建点我wcqh.cn* 固定定位不是相对于父级 */ position: relative;}/* 适合于做固定位置的导航, 楼层, 客服 */ body { height:2000px;}/** * * 1. 相对定位: 静态定位的特例,还在文档流 * 2. 绝对定位: 相对于具有定位属性的祖先元素定位 * 3. 固定定位: 总是相对于html定位(看成绝对定位的一个特例) * */</style></body></html>© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容