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ù)奈滤恪A!!?/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
  • 文/蒼蘭香墨 我猛地睜開眼芦岂,長吁一口氣:“原來是場噩夢啊……” “哼瘪弓!你這毒婦竟也來了?” 一聲冷哼從身側響起禽最,我...
    開封第一講書人閱讀 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