今天我们就来分享一下position:absolute绝对定位在Web前端CSS定位中的应用场景的相关场景！
绝对定位是CSS中一个非常常见的知识点。接下来我们将通过7个不同的关卡、7个不同的案例来讲解！
绝对定位元素的属性
元素与文档流完全分离，释放自身位置的元素的层级会被提升，并且会覆盖其他离自己最近的元素进行位置调整。如果没有定位的父元素，则会相对于body调整位置。元素支持宽度高设置margin:auto;水平居中无效。您可以使用left 和margin-left 来控制元素的水平居中。如果没有设置元素的宽度和高度，同时设置top和bottom会改变元素的高度，设置left和right会改变元素的宽度。绝对定位元素常见用法合集
上、下、左、右优先（情况1） 相对于直接父元素定位（情况2） 相对于父元素的父元素定位（情况3） 相对于body 定位（情况4） 子元素自适应父元素宽度和高度（情况5） 设置元素水平和垂直居中（情况6） 更改元素的层次关系（情况7）：
1、top、bottom以及left、right 优先级
如果元素添加宽度和高度，并设置顶部和顶部底部属性同时存在时，顶部值将是主要值。如果同时设置了left和right属性，则以left为主。
样式type='text/css' html,body{margin:0;} .box{ width:100px;高度：100px；边距：自动50 像素；背景颜色：粉色； position:relative;/*相对定位*/} .box .item{ width:50px;高度：50px； position:absolute;/*绝对定位*/left:-20px;/*左距相对定位元素距离*/top:-20px;/*相对定位元素顶部距离*/Bottom:0px;/*无效*/right :0px;/*无效*/背景颜色：skyblue; }/style copy:
2、相对于直接父元素定位
相对于直接父元素的定位情况太多，下图列举了几个
其中，图1 鼠标滑动悬浮效果源码
样式主体，h3{ 边距：0;填充：0； } .音乐{ 宽度：150px;高度：150 像素；边距：100px 自动；位置：相对；100%；背景颜色：rgba(0,0,0,0.5);颜色：#fff；位置：绝对；左：0px；底部：0px；字体大小：14px；字体粗细：100；空间：nowrap；溢出：隐藏；文本溢出：省略号； } .music span.icon-hot{ 填充：2px 6px 4px 5px;背景颜色：红色；颜色：#fff；右：0px；顶部：0px； }/stylebody div class='music' img src='images/music.jpg' alt='' height='150' div class='video-mask'/div span class='icon-hot'latest/span h3 class='video-title'古戏风格丨一曲音乐，惊艳芳华/h3 /div/body Copy:
3、相对父元素的父元素定位-二级右测悬浮菜单
style body,ul,li{ margin:0;填充：0； } body{ 背景图像：线性渐变（向右、天蓝色、粉色）； } ul{ 列表样式：无；宽度：150px；边距：自动100 像素； position:relative;/*相对定位，menu-item相对于ul绝对定位*/} ul li{ height: 35px;行高：35px；文本缩进：2em；背景颜色：天蓝色； } ul li a{ 文本装饰：无；颜色：#fff； } ul li:hover{ 背景颜色： 鲑鱼； } ul li .menu-item{ 宽度： 200px;高度：100%；背景颜色：#fff； position:absolute;/*绝对定位*/left:150px;顶部：0px；显示：无； } ul li:hover .menu-item{ 显示： 块； } /stylebodyul class='menu' li a href='#'菜单项1/a div class='menu-item' 内容1/div /li li a href='#'菜单项2/a div class='菜单项'内容2/div /li li a href='#'菜单项3/a div class='菜单项'内容3/div /li li a href='#'菜单项3/a div class='menu-item' content 4/div /li/ul/body copy
4、相对于body定位-右击显示桌面菜单
当鼠标在浏览器窗口上单击右键时，右键位置会显示相应的桌面菜单。这里的菜单是相对于主体绝对定位的。
样式body,ul,li{ 边距： 0;填充：0； } ul{ 列表样式：无； } .menu{ 宽度：200px;高度：200px；背景颜色：#fff；边框：1px实线#ddd；框阴影：2px 2px 5px #ddd；位置：绝对；显示：无； } .menu li{ 文本缩进：2em;字体大小：14px；颜色：#666；行高：30px；悬停{背景颜色：#ddd; }/stylebody ul class='menu' id='menu' li 返回/li li 前进/li li 重新加载/li li 新建文件夹/li li 设置背景/li /ul script var tag=document.getElementById('menu') ; var li=document.querySelectorAll('.menu li'); //取消系统默认右键弹出窗口document.oncontextmenu=function(){ return false; } //按下右键并抬起document.onmouseup=function(e){ if(e.button==2){//鼠标按下时判断右键//获取鼠标按下时的坐标按var x=e。第X页； var y=e.pageY; //将鼠标按下时的坐标分别赋值给标签元素的左侧和顶部tag.style.left=x+'px'; tag.style.top=y+'px'; /* 右键显示右侧桌面菜单*/tag.style.display='block'; } } document.onclick=function(){ /* 单击窗口任意位置即可隐藏桌面菜单*/tag.style.display='none'; } /script/body 复制：
5、子元素自适应父元素宽高-黑色半透明遮罩层
黑色半透明遮罩层不需要设置宽度和高度。我们通过位置的左、右、上、下控制黑色半透明遮罩层的宽度和高度。
样式body,ul,li{ 边距：0;填充：0； } ul{ 列表样式：无；宽度：690 像素； } ul li{ 边距：5px;向左飘浮；背景颜色：天蓝色；位置：相对； /*相对定位*/} ul li:nth-child(1), ul li:nth-child(3){ width: 200px;高度：200px； } ul li:nth-child(2){ 宽度： 250px;高度：200px； } ul li:nth-child(4), ul li:nth-child(5){ 宽度： 330px;高度：200px； } ul li:before{ 显示：块；内容： ''; /*通过定位控制元素的宽高，并且可以自适应父元素*/position:absolute;左：20px；右：20px；顶部：20px；底部：20px； background-color: rgba(0,0,0, 0.5);/*黑色半透明遮罩层*/}/stylebody ul li/li li/li li/li li/li li/li /ul/body Copy: 010- 1010 三角形相对于父元素水平居中源码
样式html,body{ 边距：0;宽度：100%；高度：100%； } .tag{ 宽度：100px;高度：100px；内边距：10px；边距：自动100 像素；背景颜色：橙色； 10 像素； position:relative;/*绝对定位*/} .tag:after{ display:block;内容： ''; /*下面三行代码画一个三角形*/width:0;边框：10px实心透明；边框-底部颜色：橙色；位置：绝对； /*使用绝对定位来设置三角形的位置*//*下面两行代码设置三角形相对于父元素水平居中*/left:50%;左边距：-10px；顶部：-20px； }/stylebody div class='tag'/div/body 复制：
6、绝对定位设置元素水平垂直居中
当鼠标滑过元素时，改变z-index的值，增加元素的层级，让其显示在顶部。
样式body,ul,li{ 边距：0;填充：0； } 正文{ 背景颜色：#000; } ul{ 列表样式：无；宽度：800px；高度：300px；边距：自动50 像素； position:relative ;/*相对定位*/perspective:800px ;/*3D场景-景深（观看距离）*/} ul li{ width:400px;高度：300px； position:absolute;/*绝对定位*/left:calc(var (--i)*100px);/*通过自定义属性动态计算元素的左值*/transform:rotateY(20deg);/*旋转Y轴20deg*/box-shadow: 0px 2px 35px skyblue;过渡：全部. 5s;/*过渡动画*/} ul li img{ width: 100%;高度：100%；对象适配：覆盖； } ul li:hover{ 边框：10px 实心#fff; transform:rotateY(0deg);/*元素的Y轴旋转到0deg*/z-index:2;/*改变元素层级，使元素显示在顶部*/top:50px; }/stylebody ul li style='--i:0'img src='images/rotate1.webp' alt=''/li li style='--i:1'img src='images/rotate2.webp' alt=''/li li style='--i:2'img src='images/rotate3.webp' alt=''/li li style='--i:3'img src='images/rotate1.webp' webp' alt=''/li li style='--i:4'img src='images/rotate2.webp' alt=''/li li style='--i:5'img src='images/rotate3.webp' alt=''/li /ul/bodyCopy
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5、CSS/CSS3、JavaScript，真实企业项目开发，云服务器在线部署，从入门到熟练
PC端项目开发（1） 手机WebApp开发（2） 多端响应式开发（1） 共4个完整项目开发！一行行代码引领实践开发，我们做企业实际开发做的事。从学习开始就进入工作状态，以免浪费时间。
从学习开始同步使用Git管理项目代码的版本，并用Markdown记录学习笔记，包括真实大厂项目的开发标准和设计规范、命名规范、项目代码规范、SEO优化规范
从蓝湖UI设计稿到PC端、移动端、多端响应式开发项目开发
真机调试、云服务在线部署； Linux环境下部署Nginx，Nginx性能优化； Gzip压缩、HTTPS加密协议、域名服务器归档、分析；企业项目域名重定向、多站点、多系统部署的终极解决方案；使用Git在线项目部署；这些内容在“30天挑战学习计划”中都被覆盖到了每一个细节，包括视频+图文教程+项目资料等，只为实力爱好者，真正一次性掌握企业项目开发必备技能，无需少走弯路！
点击关注作者并阅读全文