10.定位

一.標準流（Normal Flow）

  • 默認情況下，元素都是按照normal flow（標準流洛史、常規(guī)流秘豹、正常流、文檔流【document flow】）進行排布
    • 從左到右诱咏、從上到下按順序擺放好
    • 默認情況下苔可，互相之間不存在層疊現(xiàn)象
image-20210506171320203
image-20210506171234069

二.為何不用margin,padding定位

  • 在標準流中，可以使用margin袋狞、padding對元素進行定位
    • 其中margin還可以設置負數(shù)
  • 比較明顯的缺點是
    • 設置一個元素的margin或者padding焚辅，通常會影響到標準流中其他元素的定位效果
    • 不便于實現(xiàn)元素層疊的效果

三.定位

3.1 定位模式

定位模式?jīng)Q定元素的定位方式 ，它通過 CSS 的 position 屬性來設置苟鸯，其值可以分為四個：

image-20210506171615703
  • static：靜態(tài)定位
  • relative：相對定位
  • absolute：絕對定位
  • fixed：固定定位

3.2 邊偏移

邊偏移就是定位的盒子移動到最終位置同蜻。有 top、bottom早处、left 和 right 4 個屬性湾蔓。

image-20210506171803788

3.3 static定位

  • 靜態(tài)定位是元素的默認定位方式，無定位的意思砌梆。
  • 元素按照normal flow布局
  • left 默责、right、top咸包、bottom沒有任何作用

3.4 相對定位

相對定位是元素在移動位置的時候桃序，是相對于它原來的位置來說的（自戀型）。

語法：

選擇器 { position: relative; }

相對定位的特點：（務必記桌锰薄）

  1. 它是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）葡缰。
  2. 原來在標準流的位置繼續(xù)占有，后面的盒子仍然以標準流的方式對待它忱反。因此泛释，相對定位并沒有脫標。它最典型的應用是給絕對定位當?shù)奈滤恪Ａ！！?/li>
  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 “子絕父相”

在絕大數(shù)情況下，子元素的絕對定位都是相對于父元素進行定位

如果希望子元素相對于父元素進行定位叁执，又不希望父元素脫標茄厘，常用解決方案是：

父元素設置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變?yōu)閕nline-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 絕對練習二：網(wǎng)易考拉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>網(wǎng)易考拉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）

  • 文檔的可視區(qū)域
  • 如右圖紅框所示
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練習：網(wǎng)易考拉

<!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>網(wǎng)易考拉固定定位</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屬性用來設置定位元素的層疊順序（僅對定位元素有效）
    • 取值可以是正整數(shù)、負整數(shù)布隔、0
  • 比較原則
    • 如果是兄弟關系
    • z-index越大离陶，層疊在越上面
    • z-index相等，寫在后面的那個元素層疊在上面
  • 如果不是兄弟關系
    • 各自從元素自己以及祖先元素中衅檀，找出最鄰近的2個定位元素進行比較
    • 而且這2個定位元素必須有設置z-index的具體數(shù)值
image-20210507115633900
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末枕磁，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子术吝，更是在濱河造成了極大的恐慌计济，老刑警劉巖茸苇，帶你破解...
    沈念sama閱讀 222,729評論 6贊 517
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異沦寂，居然都是意外死亡学密，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門传藏，熙熙樓的掌柜王于貴愁眉苦臉地迎上來腻暮，“玉大人，你說我怎么就攤上這事毯侦】蘧福” “怎么了？”我有些...
    開封第一講書人閱讀 169,461評論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵侈离，是天一觀的道長试幽。 經(jīng)常有香客問我，道長卦碾，這世上最難降的妖魔是什么铺坞？ 我笑而不...
    開封第一講書人閱讀 60,135評論 1贊 300
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮洲胖，結果婚禮上济榨，老公的妹妹穿的比我還像新娘。我一直安慰自己绿映，他們只是感情好擒滑，可當我...
    茶點故事閱讀 69,130評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著叉弦，像睡著了一般丐一。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上卸奉，一...
    開封第一講書人閱讀 52,736評論 1贊 312
  • 城市分裂傳說
    那天钝诚，我揣著相機與錄音颖御，去河邊找鬼榄棵。 笑死，一個胖子當著我的面吹牛潘拱，可吹牛的內容都是我干的疹鳄。 我是一名探鬼主播，決...
    沈念sama閱讀 41,179評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼芦岂，長吁一口氣：“原來是場噩夢啊……” “哼瘪弓！你這毒婦竟也來了？” 一聲冷哼從身側響起禽最，我...
    開封第一講書人閱讀 40,124評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤腺怯，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體务荆，經(jīng)...
    沈念sama閱讀 46,657評論 1贊 320
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡暴区，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了晾虑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疹味。...
    茶點故事閱讀 40,872評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖帜篇，靈堂內的尸體忽然破棺而出糙捺，到底是詐尸還是另有隱情，我是刑警寧澤笙隙，帶...
    沈念sama閱讀 36,533評論 5贊 351
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布洪灯，位于F島的核電站，受9級特大地震影響逃沿，放射性物質發(fā)生泄漏婴渡。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3贊 336
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一凯亮、第九天 我趴在偏房一處隱蔽的房頂上張望边臼。 院中可真熱鬧，春花似錦假消、人聲如沸柠并。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0贊 25
  • 一樁弒父案富拗，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽臼予。三九已至，卻和暖如春啃沪，著一層夾襖步出監(jiān)牢的瞬間粘拾，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工创千， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留缰雇，地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3贊 379
  • 代替公主和親
    正文 我出身青樓追驴，卻偏偏與公主長得像械哟，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子殿雪，可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2贊 361