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;
        }
相关推荐
孤水寒月几秒前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀9 分钟前
html初学者第一天
前端·html
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆6 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试