H5中的定位是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
一.定位流分类
1.1相对定位
1.2绝对定位
1.3固定定位
1.4静态定位
二.什么是相对定位?
相对定位就是相对于自己以前在标准流中的位置来移动
position: relative;
相对定位注意点
1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
2.在相对定位中同一个方向上的定位属性只能使用一个<a>(也就是使用了left,就不要使用right;使用了top,就不要使用bottom)</a>.
3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
4.由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局,<a>(margin/padding会加给定位之前的盒子位置)</a>
相对定位应用场景
1.用于对元素进行微调
2.配合后面学习的绝对定位来使用
.box2{ background-color: green; position: relative; //相对定位 top: 20px; left: 20px; margin-top: 20px;//会加在定位之前的位置上 }
三. 什么是绝对定位?
绝对定位就是相对于body来定位
position: absolute;
注意点
1绝对定位的元素是脱离标准流的
2绝对定位的元素是不区分块级元素/行内元素/行内块级元素
.box2{ background-color: green; position: absolute; //绝对定位 left: 0; bottom: 0; //在body的左下角 }
四. 绝对定位参考点
规律
1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
五. 注意点
1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点;
看完上述内容,你们掌握H5中的定位是什么的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!
文章题目:H5中的定位是什么-创新互联
文章地址:https://www.cdcxhl.com/article40/epsho.html
成都网站建设公司_创新互联,为您提供网站内链、服务器托管、企业网站制作、营销型网站建设、关键词优化、App开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联