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;
        }
相关推荐
hj5914_前端新手1 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法1 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku1 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode1 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu1 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu1 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu1 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu1 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu1 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在1 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net