CSS中相对定位和绝对定位如何使用
这篇文章主要介绍了CSS中相对定位和绝对定位如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS中相对定位和绝对定位如何使用文章都会有所收获,下面我们一起来看看吧。
成都创新互联公司:于2013年成立为各行业开拓出企业自己的“网站建设”服务,为1000+公司企业提供了专业的成都网站建设、网站制作、网页设计和网站推广服务, 定制网站设计由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
一、相对定位
相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位。它相对的是它自己。
举例:大div里面包含5个小P,给P不同的类名,分别设置绝对定位和相对定位,看看他们有什么变化
没有设置定位的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
*{padding: 0;margin: 0;} .box{width: 400px;height: 500px;border: 1px solid black;margin: 50px auto;} .p1{width: 100px;height: 100px;background: red;} .p2{width: 100px;height: 100px;background: orange;} .p3{width: 100px;height: 100px;background: yellow;} .p4{width: 100px;height: 100px;background: green;} .p5{width: 100px;height: 100px;background: purple;}
11
22
33
44
55
|
效果如图所示:
现在给第一个p标签设置相对定位,让他相对于自己原来的位置上偏移50px,左边偏移50px,具体代码如下:
1 | .p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;} |
效果图:
对比前后效果图,有没有发现第一个p元素,它相对自己原来的位置发生了偏移,而且偏移以后,它依然占据原来的位置,后面的元素不会填补,如果有重叠,会重叠在它文档流元素之上,相对定位不会把其他元素挤掉。
二、绝对定位
绝对定位是指,该元素相对它的父元素偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位。
注:相对的是父元素,而且这个父元素必须设置了position属性。如果父元素没有position属性,则从最近的父元素开始找,直到找到body为止。
举例:给第三个p元素设置绝对定位,让其上偏移200px,左偏移200px,具体代码如下:
1 | .p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;} |
效果图:
对比图1和图3可以发现,设置了绝对定位的元素,会脱离文档流,后面的元素会填补上来。因为第三个p标签的父元素为div,没有给div设置position属性,所以它最终找到body,相对于body发生了偏移。
三、相对定位和绝对定位的区别
相对定位:相对自己原来的位置发生偏移,不会脱离文档流,不会删除它原来在文档流中占据的位置,且后面是元素不会填补空位
绝对定位:相对它的父元素发生偏移(而且这个父元素必须设置了position属性,如果父元素没有position属性,则从最近的父元素开始找,直到找到body为止),会脱离文档流,后面的元素会填补它原来的位置。
关于“CSS中相对定位和绝对定位如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS中相对定位和绝对定位如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
名称栏目:CSS中相对定位和绝对定位如何使用
文章地址:http://scyanting.com/article/gdiess.html