CSS定位

概念

  • 规定元素的位置
  • 主要用于没有规律的元素布局
  • 相对定位、绝对定位、固定定位

使用:

  • 规定是哪一种定位
  • 指在一个方向上的偏移量top、bottom、left、right
  • top和bottom同时设置则只有top生效
  • left和right同时设置则只有left生效

相对定位

position:relative

  • 指定之后,元素就是一个定位元素,脱离文档流
  • 相对定位脱离文档流,当时原来的位置还得保留,并未完全脱离文档流
  • left和top方向的设置优先
  • (相对原来的位置进行偏移)

绝对定位

  • 脱离文档流
  • 原来位置不会保留
  • 相对最近的、有定位属性、的父元素进行定位
  • 如果找不到这类元素,才会依据body进行定位

定位偏移量

  • 可以使用合法的尺寸单位
  • 可以使用负值,元素的偏移方向与正值相反
  • 元素相对于哪个元素进行定位,使用百分比时,就是哪个元素的宽/高的百分比(可以使用负的百分比)
css 复制代码
        .adpa{
            position: relative;
           width: 700px;
           height: 500px;
        }

        .ab1{
            position: absolute;
            top: 100px;
        }
css 复制代码
 <div class="abpa" style="border: 1px red solid;">
        <div class="ab1"><img src="../duck.jpg" alt=""></div>
 </div>

层级

  • 每一定位元素会独占一层,不允许有其他元素
  • z-index: 2; 改变元素浮动的层级来改变元素的堆叠的顺序
  • 数字越大,元素的层级越高,即最在外面一层
  • 默认值为0
  • 当层级一样时,后写的元素会盖住前面写的元素
css 复制代码
<body>
    <img class="a" src="../SeanXiao.png" alt="">
    <img class="b" src="../duck.jpg" alt="">
    <img class="c" src="../flower.jpg" alt="">`
</body>
css 复制代码
        .a{
            position: absolute;
            top: 50px;
            left: 50px;

        }
        .b{
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }  
        .c{
            position: absolute;
            top: 150px;
            left: 150px;
        }

固定定位

复制代码
 position: fixed、top、bottom;

文档完全脱离文档流

是相较于浏览器的窗口进行定位

css 复制代码
<body>
<img class="a" src="../SeanXiao.png" alt="">
    <img class="b" src="../duck.jpg" alt="">
    <img class="c" src="../flower.jpg" alt="">
    <img class="d" src="../image.png" alt="">
</body>
css 复制代码
        .a{
            width: 100%;
            height: auto;
        }
        .d{
            position: fixed;
            top: 50px;
            left: 5px;
            height: auto;
        }
相关推荐
念念不忘 必有回响30 分钟前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL1 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟3 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
fruge4 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean5 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636025 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
太过平凡的小蚂蚁7 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫7 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳7 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng9 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app