10.定位(position)

2780

一.标准流（Normal Flow）

  • 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
    • 从左到右、从上到下按顺序摆放好
    • 默认情况下，互相之间不存在层叠现象

image-20210506171320203

image-20210506171234069

二.为何不用margin,padding定位

  • 在标准流中，可以使用margin、padding对元素进行定位
    • 其中margin还可以设置负数
  • 比较明显的缺点是
    • 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
    • 不便于实现元素层叠的效果

三.定位

3.1 定位模式

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

image-20210506171615703

  • static：静态定位
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位

3.2 边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

image-20210506171803788

3.3 static定位

  • 静态定位是元素的默认定位方式，无定位的意思。
  • 元素按照normal flow布局
  • left 、right、top、bottom没有任何作用

3.4 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：

选择器 { position: relative; }
复制代码

相对定位的特点：（务必记住）

  1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
  3. 元素按照normal flow布局
  4. 可以通过left、right、top、bottom进行定位
  5. nleft、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
  6. image-20210506172428927
  7. 相对定位的应用场景
    1. 在不影响其他元素位置的前提下，对当前元素位置进行微调

image-20210506180723773

 <style>
    div {
      background-color: pink;
    }

    strong {
      /* 
     position:relative
       1.参照自己原来的位置进行定位
       2.脱离标准流
     */
      position: relative;
      left: 100px;
      top: -30px;
    }
  </style>

  <body>
    <a href="">a元素</a>
    <strong>strong</strong>
    <i>i</i>
    <img src="https://juejin.cn/img/ysx.jpg"  width="300">
    <div>div元素</div>
  </body>
复制代码

3.4.1 相对定位练习一：

image-20210506181732462

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>relative练习一</title>
  </head>
  <style>
    sub {
      position: relative;
      top: 10px;
      left: 10px;
    }

    sup {
      position: relative;
      top: -20px;
      left: 20px;
    }
  </style>

  <body>
    <h1>请计算n<sub>1</sub>+n<sub>2</sub>+n<sup>2</sup>的值</h1>
  </body>

</html>
复制代码

3.4.2 相对练习二

image-20210506183415053

 <style>
    /* 
    让图片居中显示
      1.图片宽度：1280*365
      2.向左移：（1280-800）/2=240
     */
    .content {
      width: 800px;
      background-color: pink;
      height: 365px;
      margin: 20px auto;
      overflow: hidden;
    }

    .content>img {
      position: relative;
      left: -240px;
      top: 0px;
    }
  </style>

  <body>
    <div class="content">
      <img src="https://juejin.cn/img/meng.png" >
    </div>
  </body>
复制代码

image-20210506183543323

3.5 绝对定位

  • 元素脱离normal flow（脱离标准流、脱标）

  • 可以通过left、right、top、bottom进行定位

    • 定位参照对象是最邻近的定位祖先元素

    • 如果找不到这样的祖先元素，参照对象是视口

    • image-20210506205111392

    • 复制代码

  • 定位元素（positioned element）

    • position值不为static的元素

    • ==也就是position值为relative、absolute、fixed的元素==

      • image-20210506235347351 
      •  .content {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
  
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      position: absolute;
    }
  
    a {
      position: absolute;
      right: 50px;
      top: 60px;
    }
复制代码
      • image-20210506235725462 
      • .content {
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      position: absolute;
      right: 50px;
      top: 50px;
    }

    a {
      position: absolute;
      right: 50px;
      top: 60px;
    }
复制代码

3.5.1 “子绝父相”

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流，子元素设置position: absolute

简称为“子绝父相”

3.5.2 绝对定位练习一：

3.5.2.1 浮动+margin-left+margin-top

image-20210507010632615

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute练习一:浮动</title>
    <link rel="stylesheet" href="https://juejin.cn/css/reset.css">
    <style>
      /* 
      浮动+margin-left+margin-top
      */
      .content {
        position: relative;
        display: inline-block;
      }

      .content>ul {
        width: 300px;
        height: 100px;
        position: absolute;
        bottom: 50px;
        left: 15px;
      }

      .content>ul>li {
        width: 70px;
        height: 30px;
        background-color: #fff;
        border-radius: 40px;
        margin-left: 22.5px;
        margin-top: 13.3px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        float: left;
        box-shadow: 0 0 1px raba(0, 0, 0, 0.5);
      }
    </style>
  </head>

  <body>
    <div class="content">
      <img src="https://juejin.cn/post/img/beauty-left-img.jpg" >
      <ul>
        <li><a href="">精致护肤</a></li>
        <li><a href="">人气面膜</a></li>
        <li><a href="">大牌彩妆</a></li>
        <li><a href="">防晒修护</a></li>
        <li><a href="">迷人香氛</a></li>
        <li><a href="">面部精华</a></li>
      </ul>
    </div>
  </body>

</html>
复制代码
3.5.2.2 无浮动+display:inline-block+margin:0 auto;left:0;right:0+text-align: justify;text-align-last: justify;

image-20210507010816670

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute练习一:无浮动</title>
    <link rel="stylesheet" href="https://juejin.cn/css/reset.css">
    <style>
      /* 
      无浮动+display:inline-block+margin:0 auto;left:0;right:0+text-align: justify;
      text-align-last: justify;
      */
      .content {
        position: relative;
        display: inline-block;
      }

      .content>ul {
        width: 300px;
        height: 100px;
        position: absolute;
        bottom: 50px;
        left: 0;
        /* text-align: justify;让内容等分，但是对最后一行无效 */
        text-align: justify;
        text-align-last: justify;
        /*让里面的ul居中，需要设置left,right都为零*/
        left: 0;
        right: 0;
        margin: 0 auto;
      }

      .content>ul>li {
        /* 
        不设置margin-left和margin-right,设置里面的a变为inline-block，并且a宽度增大
        */
        display: inline-block;
      }

      .content>ul>li>a {
        display: inline-block;
        width: 80px;
        height: 30px;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 40px;
        /* 
        下面两个是覆盖父元素的text-align
        */
        text-align: center;
        text-align-last: center;
        line-height: 30px;
        font-size: 14px;
        box-shadow: 0 0 0 1px raba(0, 0, 0, 0.5);
      }
    </style>
  </head>

  <body>
    <div class="content">
      <img src="https://juejin.cn/post/img/beauty-left-img.jpg" >
      <ul>
        <li><a href="">精致护肤</a></li>
        <li><a href="">人气面膜</a></li>
        <li><a href="">大牌彩妆</a></li>
        <li><a href="">防晒修护</a></li>
        <li><a href="">迷人香氛</a></li>
        <li><a href="">面部精华</a></li>
      </ul>
    </div>
  </body>

</html>
复制代码
3.5.2.3 flex

3.5.3 绝对练习二：网易考拉QRcode

GIF 2021-5-7 11-16-17-1620359422313.gif

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易考拉QRcode</title>
  </head>
  <link rel="stylesheet" href="https://juejin.cn/css/reset.css">
  <style>
    .QR {
      position: relative;
      margin-left: 300px;
      font-size: 13px;
      text-align: center;
      /* background-color: pink; */
    }

    .QR>.QRIMG {
      position: absolute;
      top: 30px;
      /* 
      向左移动50%；
       */
      left: 0;
      transform: translate(-50%);
      margin-left: 50%;
      border: 1px solid #ccc;
      padding: 5px 5px 0;
      display: none;
    }

    .QR>.QRIMG>span {
      display: inline-block;
      margin-top: 5px;
    }

    .QR>span:first-child:hover {
      color: red;
    }

    .QR:hover .QRIMG {
      /* display: block; */
      /* 
      display:inline就可以了，因为.QRIMG绝对定位了
       */
      display: inline;
    }

    .arrow {
      position: absolute;
      top: -6px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-top: 1px solid #eaeaea;
      border-left: 1px solid #eaeaea;
      transform: rotate(45deg);
      margin-top: 0 !important;
    }
  </style>

  <body>
    <a class="QR" href="">
      <span>手机考拉</span>
      <span class="QRIMG">
        <span class="arrow"></span>
        <img src="https://juejin.cn/post/img/qrcode.png" >
        <span>下载APP</span>
        <span>领1000元新人红包</span>
      </span>
    </a>
  </body>

</html>
复制代码

3.5.4 绝对定位技巧

  • 绝对定位元素（absolutely positioned element）

    • position值为absolute或者fixed的元素

  • 对于绝对定位元素来说

    • ==定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度==
    • ==定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度==

  • 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性

    • left: 0、right: 0、top: 0、bottom: 0、margin:0
    • image-20210507114106208

  • 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

    • left: 0、right: 0、top: 0、bottom: 0、margin: auto

    • 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

      • 水平垂直居中：left: 0、right: 0、top: 0、bottom: 0、margin: auto

      • image-20210507114308140

      • 水平居中：left: 0、right: 0、margin:0 auto

      • image-20210507114647206 
      • <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位技巧</title>
  </head>
  <style>
    /* 
    绝对定位技巧：
      1.- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
        - 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
      2.- 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
           - left: 0、right: 0、top: 0、bottom: 0、margin:0
      3.- 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
            - left: 0、right: 0、top: 0、bottom: 0、margin: auto
            - 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
     */
    .content {
      width: 600px;
      height: 600px;
      background-color: pink;
      position: relative;
    }

    .div {
      height: 100px;
      width: 100px;
      background-color: red;
      /* 
      1.对于里面没有内容，则这个盒子会消失，需要里面有内容撑开盒子的宽度
      2.如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
           - left: 0、right: 0、top: 0、bottom: 0、margin:0
      3.- 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
            - left: 0、right: 0、top: 0、bottom: 0、margin: auto
            - 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
       */
      position: absolute;
      left: 0;
      /* top: 0; */
      right: 0;
      /* bottom: 0; */
      margin: 0 auto;
    }
  </style>

  <body>
    <div class="content">
      <div class="div"></div>
    </div>
  </body>

</html>
复制代码

3.6 固定定位

  • 元素脱离normal flow（脱离标准流、脱标）
  • 可以通过left、right、top、bottom进行定位
    • 定位参照对象是视口（viewport）
  • 当画布滚动时，固定不动

3.6.1 画布与视口

视口（Viewport）

  • 文档的可视区域
  • 如右图红框所示

image-20210506193319220

画布：进度条里面所有的内容

3.6.2 fixed

<style>
 /* 
      固定定位：
         1.脱离文档流
         2.通过left,right,top,bottom进行定位
         3.当画布滚动时，固定不动
         4.定位参照对象是视口（viewport）
       */
    div {
      background-color: pink;
    }

    strong {
      position: fixed;
      right: 10px;
      top: 300px;
    }
  </style>

  <body>
    <a href="">a元素</a>
    <strong>strong</strong>
    <i>i</i>
    <img src="https://juejin.cn/img/ysx.jpg"  width="300">
    <div>div元素</div>
  </body>
复制代码

image-20210506194025825

3.6.3 fixed练习：网易考拉

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易考拉固定定位</title>
  </head>
  <style>
    .fixed-box {
      width: 80px;
      height: 320px;
      border: 1px solid #eaeaea;
      position: fixed;
      right: 20px;
      top: 200px;
      text-align: center;
      font-size: 14px;
      /* line-height: 80px; */
    }

    .fixed-box a {
      display: block;
      text-decoration: none;
      height: 80px;
      border-bottom: 1px solid #eaeaea;
    }

    .fixed-box a:last-child {
      border-bottom: none;
    }

    .fixed-box a>span {}

    .fixed-box a>i {
      display: block;
      width: 20px;
      height: 20px;
      /* background-color: red; */
      margin: 0 auto 0;
      padding-top: 20px;
    }

    .fixed-box a:first-child:hover {
      background-image: url("img/icon-aside-right-signin-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }

    .fixed-box a:nth-child(2):hover {
      background-image: url("./img/icon-aside-right-cart-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }

    .fixed-box a:nth-child(3):hover {
      background-image: url("./img/icon-aside-right-phone-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }

    .fixed-box a:last-child:hover {
      background-image: url("./img/icon-aside-right-top-active.png");
      background-repeat: no-repeat;
      background-position: center 20px;
    }
  </style>

  <body>
    <div class="fixed-box">
      <a href=""><i><img src="https://juejin.cn/post/img/icon-aside-right-signin.png" ></i><span>签到</span></a>
      <a href=""><i><img src="https://juejin.cn/post/img/icon-aside-right-cart.png" ></i><span>购物车</span></a>
      <a href=""><i><img src="https://juejin.cn/post/img/icon-aside-right-phone.png" ></i><span>APP</span></a>
      <a href=""><i><img src="https://juejin.cn/post/img/icon-aside-right-top.png" ></i><span>Top</span></a>
    </div>
  </body>

</html>
复制代码

GIF 2021-5-7 0-01-43-1620359409606.gif

3.7 position总结

image-20210507114845708

3.8 Z-Index元素的层叠

image-20210507115214456

  • z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
    • 取值可以是正整数、负整数、0
  • 比较原则
    • 如果是兄弟关系
    • z-index越大，层叠在越上面
    • z-index相等，写在后面的那个元素层叠在上面
  • 如果不是兄弟关系
    • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
    • 而且这2个定位元素必须有设置z-index的具体数值

image-20210507115633900

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云