焦点速递！CSS绝对定位7大应用场景实战案例分享

2022-12-09 17:10:47 来源：博客园

今天我们来分享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、相对父元素的父元素定位-二级右测悬浮菜单

          菜单项1       内容1
   
          菜单项2       内容2
   
          菜单项3       内容3
   
          菜单项3       内容4

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

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

          返回
       前进
       重新加载
       新建文件夹
       设置背景
   
   <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.pageX;               var y=e.pageY;               //把鼠标按下时的坐标，分别赋值给tag元素的left和top               tag.style.left=x+"px";               tag.style.top=y+"px";               /*右键后，显示右侧桌面菜单*/               tag.style.display="block";          }      }       document.onclick=function(){           /*在窗口任意位置点击，隐藏桌面菜单*/           tag.style.display="none";      }   </script>