十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
H5中的定位是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
公司主营业务:网站设计制作、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出临桂免费做网站回馈大家。
一.定位流分类
1.1相对定位
1.2绝对定位
1.3固定定位
1.4静态定位
二.什么是相对定位?
相对定位就是相对于自己以前在标准流中的位置来移动
position: relative;
相对定位注意点
1.相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
2.在相对定位中同一个方向上的定位属性只能使用一个(也就是使用了left,就不要使用right;使用了top,就不要使用bottom).
3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
4.由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局,(margin/padding会加给定位之前的盒子位置)
相对定位应用场景
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中的定位是什么的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!