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;
        }
相关推荐
yinke小琪10 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿14 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux15 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵17 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆20 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
again43220 分钟前
css生效规则
css
豆苗学前端23 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_23 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
Esun_R24 分钟前
使用CSS选择器选择列表中最后一个子元素的几种情况
css
yinke小琪25 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript