听不懂完全听不懂

来源:2-5 position-relative

据说真的有神

2019-03-29 14:30:13

麻烦老师在讲解一下,完全听不懂

写回答

1回答

好帮手慕夭夭

2019-03-29

你好同学 ,  relative是相对定位的意思。设置相对定位的元素不会脱离文档流 ,并且它原来的位置还为它保留。老师给你写一个小例子:

在页面中写一个小盒子

http://img.mukewang.com/climg/5c9dc8230001d48004230390.jpg

默认显示:

http://img.mukewang.com/climg/5c9dc86400019c1001620182.jpg

定位可以调整盒子的位置,因为它默认在左上角,如果想要让它距离左侧和上边都是10px,可以设置如下:

http://img.mukewang.com/climg/5c9dc8800001efa304020214.jpg

显示如下:

http://img.mukewang.com/climg/5c9dc8c60001e67f01760153.jpg

它的特点是不会脱离文档流 , 同学学过浮动应该知道 ,脱离文档流的元素相当于悬浮在了正常文档流的上面 。而这里盒子不会脱离文档流 ,它原位置会为保留,例如你在盒子下面设置一个盒子 ,盒子不会跑上去 ,而第一个盒子因为设置定位 , 往下移动 ,把蓝色盒子盖住了:

http://img.mukewang.com/climg/5c9dc9b500012ecc01980232.jpg

定位确实是有点难理解 ,别着急 , 一定要多听几遍 。 并建议同学在学习的过程中 ,也要跟着视频的例子去练习一下 。多做做课后的练习与编程题 。 如果在练习时 ,有不理解的具体点 ,可以粘贴代码提问,老师会有针对性的为你辅导 。这样同学慢慢的就理解了。加油 !

祝学习愉快 ,望采纳。

7

0 学习 · 40143 问题

查看课程