CSS中相对定位使用详情

1.如何设置相对定位?

给元素设置postition:relative 即可实现相对定位.

可以使用left,right,top,bottom四个属性调整位置.

2.相对定位的参考点在哪里?

相对于自己原来的位置

3.相对定位的特点:

1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响.

2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的.

默认规则是:

定位的元素盖在普通元素之上;

都发生定位的两个元素,后写的元素会盖在先写的元素之上.

3.left不能和right一起设置,top不能和bottom一起设置;

4.相对定位的元素,也能继续浮动,但是不推荐这样做;

5.相对行为的元素,也能通过margin调整位置,但不推荐这样做.

4.注意事项:

注意:绝大多数情况下,相对定位,会与绝对定位配合使用.

相关推荐
于慨2 分钟前
uniapp上传文件
前端·uni-app
安然dn5 分钟前
极简实战:React + Vue 微前端(Qiankun + Vite)
前端·vue.js
Electrolux6 分钟前
使用 Semantic Release 实现 NPM 全自动发版 monorepo 和 单仓库 项目
前端
lichenyang4537 分钟前
Javascript模块化与Async语法糖
前端
北京_宏哥11 分钟前
🔥Python零基础从入门到精通详细教程10 - python数据类型之数字(Number)-整型(int)详解
前端·python·面试
YGY_Webgis糕手之路13 分钟前
Cesium 快速入门(十二)数据加载详解
前端·gis·cesium
小高00715 分钟前
别让主线程累成狗!——带你 10 分钟撸一个 Web Worker,让浏览器偷偷开外挂
前端·javascript·面试
张志鹏PHP全栈16 分钟前
Vue3第九天,watchEffect监听响应式数据的变化
前端·vue.js
YGY_Webgis糕手之路16 分钟前
Cesium 快速入门(十三)事件系统
前端·gis·cesium
编的过程27 分钟前
vk框架或者普通函数封装的一些函数可以拿取使用【会持续更新】
开发语言·前端·javascript