Java开发
课程针对企业需求实时更新
企业级项目精炼 助力高薪
css绝对定位和相对定位的区别是什么？前端必学
来源: 知了汇智
发布:
知了姐
发布时间:
2022-07-13
前端是很多人都想学的方向，因为IT方向前端入门最容易，入门前端就不许得学会CSS层叠样式表，今天来看看CSS中的定位。CSS绝对定位和相对定位的区别是什么？前端必学。
CSS进行定位使用的是position属性，该属性一共有五个属性值，分别是static（静态定位）、relative（相对定位）、fixed（固定定位）、absolute（绝对定位）、sticky（元素根据用户的滚动位置进行定位）。今天我们重点来看看relative（相对定位）和absolute（绝对定位）。
CSS相对定位：position:relative;
指在其正常的位置上偏移；relative,使用相对定位时，移动后，它原来占的位置不会被其它元素占用。
CSS绝对定位：position:absolute;
指相对于父元素来进行top,left,bottom,right进行偏移。absolute使用绝对定位时，父元素必须有position属性，如果没有，就相对于父的父元素。谁有position属性就相对于谁，都没有就相对于body.
css绝对定位和相对定位的区别：
相对定位：相对自己原来的位置发生偏移，不会脱离文档流，不会删除它原来在文档流中占据的位置，且后面是元素不会填补空位
绝对定位：相对它的父元素发生偏移（而且这个父元素必须设置了position属性，如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止），会脱离文档流，后面的元素会填补它原来的位置。
css绝对定位和相对定位的区别是什么？前端必学。想学前端，关注程度知了堂前端培训教学，深厚的教学经验，丰富的实践项目，优厚的高新岗位，无一不在保证你的学习效率。
CSS进行定位使用的是position属性，该属性一共有五个属性值，分别是static（静态定位）、relative（相对定位）、fixed（固定定位）、absolute（绝对定位）、sticky（元素根据用户的滚动位置进行定位）。今天我们重点来看看relative（相对定位）和absolute（绝对定位）。
CSS相对定位：position:relative;
指在其正常的位置上偏移；relative,使用相对定位时，移动后，它原来占的位置不会被其它元素占用。
CSS绝对定位：position:absolute;
指相对于父元素来进行top,left,bottom,right进行偏移。absolute使用绝对定位时，父元素必须有position属性，如果没有，就相对于父的父元素。谁有position属性就相对于谁，都没有就相对于body.
相对定位：相对自己原来的位置发生偏移，不会脱离文档流，不会删除它原来在文档流中占据的位置，且后面是元素不会填补空位
绝对定位：相对它的父元素发生偏移（而且这个父元素必须设置了position属性，如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止），会脱离文档流，后面的元素会填补它原来的位置。
css绝对定位和相对定位的区别是什么？前端必学。想学前端，关注程度知了堂前端培训教学，深厚的教学经验，丰富的实践项目，优厚的高新岗位，无一不在保证你的学习效率。
注：本文部分内容以及图片来源于网络，如网站发布的有关的信息侵犯到您的权益，请及时与我们取得联系删除
- 知了汇智培训课程
-
定制我的Java学习方案
-
网络安全培训
课程领先同行业机构至少三年
百万重金打造企业级攻防实验平台
定制我的网安学习方案 -
鸿蒙认证
容易学，应用到设备端全链条打通零基础
轻松晋级鸿蒙应用开发工程师
领取我的鸿蒙认证课程
