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;
        }
相关推荐
Jammingpro1 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05155 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI7 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_98 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front8 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie8 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀9 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻9 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树9 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔9 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app