css绝对定位和相对定位的区别是什么？前端必学

知了堂姐

2024-07-09 11:12:24

0次

前端是很多人都想学的方向，因为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绝对定位和相对定位的区别是什么？前端必学。想学前端，关注程度知了堂前端培训教学，深厚的教学经验，丰富的实践项目，优厚的高新岗位，无一不在保证你的学习效率。

上一篇：div+css布局是什么意思？为什么使用div+css布局

下一篇：什么叫同步加载？同步加载和异步加载的区别