10.定位

一.标准流（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="../img/ysx.jpg" alt="" 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="../img/meng.png" alt="">
    </div>
  </body>
image-20210506183543323

3.5 绝对定位

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

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

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

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

    • image-20210506205111392

  • 定位元素（positioned element）

    • position值不为static的元素

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

      • <img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120740.png" alt="image-20210506235347351" style="zoom:33%;" />

      •  .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;
    }

      • <img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120744.png" alt="image-20210506235725462" style="zoom:33%;" />

      • .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

<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120748.png" alt="image-20210507010632615" style="zoom: 50%;" />

<!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="../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="./img/beauty-left-img.jpg" alt="">
      <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;

<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120752.png" alt="image-20210507010816670" style="zoom: 50%;" />

<!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="../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="./img/beauty-left-img.jpg" alt="">
      <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="../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="./img/qrcode.png" alt="">
        <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
    • <img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120827.png" alt="image-20210507114106208" style="zoom: 50%;" />

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

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

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

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

      • <img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120830.png" alt="image-20210507114308140" style="zoom:50%;" />

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

      • <img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120832.png" alt="image-20210507114647206" style="zoom:50%;" />

      • <!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="../img/ysx.jpg" alt="" 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="./img/icon-aside-right-signin.png" alt=""></i><span>签到</span></a>
      <a href=""><i><img src="./img/icon-aside-right-cart.png" alt=""></i><span>购物车</span></a>
      <a href=""><i><img src="./img/icon-aside-right-phone.png" alt=""></i><span>APP</span></a>
      <a href=""><i><img src="./img/icon-aside-right-top.png" alt=""></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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342