今天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！

绝对定位是CSS中非常中啊哟的知识点，接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解！

绝对定位元素的特性

• 使元素完全脱离文档流,将释放自己的位置
• 元素的层级提升，会覆盖在其它元素上
• 离自己最近的定位父元素进行位置调整，如果没有定位的父元素，则相对body进行位置调整
• 元素支持宽高设置
• margin:auto；水平居中失效。可以通过left与margin-left控制元素水平居中
• 定位元素未设置宽高情况下，同时设置top和bottom会改变元素高，同时设置left和right会改变元素宽

绝对定位元素常见用法合集

• top、bottom以及left、right 优先级（案例1）
• 相对于直接父元素定位（案例2）
• 相对父元素的父元素定位（案例3）
• 相对于body定位（案例4）
• 子元素自适应父元素宽高（案例5）
• 设置元素水平垂直居中（案例6）
• 改变元素的层级关系（案例7）

1、top、bottom以及left、right 优先级

如果元素添加宽高，同时设置top与bottom属性，会以top值为主。

如果同时设置left和right属性，以left为主。

2、相对于直接父元素定位

相对于直接父元素定位案例是太多太多，下图列举了几个

其中图1鼠标滑动悬浮效果 源码

3、相对父元素的父元素定位-二级右测悬浮菜单

4、相对于body定位-右击显示桌面菜单

当鼠标在浏览器窗口右击时，会在右击的位置显示对应的桌面菜单。这里的菜单就是相对于body来绝对定位的。

5、子元素自适应父元素宽高-黑色半透明遮罩层

黑色半透明遮罩层不用设置宽高。我们通过position的left，right、top、bottom来控制黑色半透明遮罩层宽度和高度。

6、绝对定位设置元素水平垂直居中

三角形相对父元素水平居中源码

7、改变元素的层级关系-3D图片展示效果

当鼠标滑动到元素上面，通过改变z-index的值，来提升元素层级，让其在最上方展示。

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自公众号！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程