<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>定位</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      /*div{
        width: 100px;
        height: 100px;
      }
      .box1{
        background-color: red;
      }
      .box2{
        background-color: green;

        position: relative;
        top: 10px;
        left: 20px;

        margin-top: 20px;
        margin-bottom: 20px;
      }
      .box3{
        background-color: blue;
      }
      span{
        position: relative;

        width: 100px;
        height: 100px;
        background-color: red;
      }*/

      /*input{
        width: 150px;
        height: 50px;
      }
      img{
        width: 150px;
        height: 50px;
        position: relative;
        top: 20px;
      }*/

      /*div{
        width: 100px;
        height: 100px;
      }
      .box1{
        background-color: red;
      }
      .box2{
        background-color: green;

        position: absolute;
        top: 0px;
        right: 0px;
      }
      .box3{
        background-color: blue;
      }
      span{
        position: absolute;

        width: 100px;
        height: 100px;
        background-color: red;
      }*/

      /*.box1{
        width: 300px;
        height: 300px;
        background-color: red;

        position: absolute;
        position: relative;
        position: fixed;
        position: static;
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: blue;

        position: absolute;
        position: relative;
        position: fixed;
      }
      .box3{
        width: 100px;
        height: 100px;
        background-color: green;

        position: absolute;
        bottom: 0;
      }*/

    /*.box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .box2{
      width: 2000px;
      height: 100px;
      background-color: blue;
    }
    .box3{
      width: 100px;
      height: 2000px;
      background-color: green;
    }*/

    /*.box{
      width: 300px;
      height: 300px;
      background-color: red;
      border: 5px solid;
      box-sizing: border-box;
      padding-left: 30px;
      padding-top: 20px;
      position: absolute;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      left: 0px;
      top: 0px;
    }*/

    /*ul{
      width: 800px;
      height: 50px;
      background-color: #CCC;
      margin: 0 auto;
      list-style: none;
      margin-top: 100px;
    }
    ul li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      float: left;
    }
    ul li:nth-of-type(4){
      background-color: yellow;
      position: relative;
    }
    ul li img{
      width: 15px;
      height: 15px;
      position: absolute;
      left: 40px;
      top: -10px;
      left: 50%;
      margin-left: -7.5px;
    }*/

    /*div{
      width: 300px;
      height: 300px;
      border: 2px solid #ccc;
      margin: 0 auto;
      margin-top: 100px;
      position: relative;
    }
    div .image01{
      width: 300px;
      height: 200px;
    }
    div .image02{
      width: 45px;
      height: 44px;
      position: absolute;
      left: 0;
      top: 0;
    }
    div .image03{
      width: 134px;
      height: 42px;
      position: absolute;
      left: -7px;
      top: 163px;
    }*/

    /*div{
      width: 520px;
      height: 280px;
      border: 2px solid gold;
      margin: 0 auto;
      margin-top: 100px;
      position: relative;
    }
    div img{
      width: 520px;
      height: 280px;
    }
    div span{
      width: 40px;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 80px;
      text-align: center;
      font-size: 24px;
      position: absolute;
    }
    div .leftArrow{
      left:0;
      top: 100px;
    }
    div .rightArrow{
      right:0;
      top: 100px;
    }
    ul {
      list-style: none;
      width: 200px;
      height: 40px;

      position: absolute;
      bottom: 10px;
      right: 10px;
    }
    ul li {
      width: 40px;
      line-height: 40px;
      float: left;
      text-align: center;
      border: 1px solid gold;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.5);
    }*/

    /*div{
      width: 100px;
      height: 100px;
    }
    .box1{
      background-color: red;
    }
    .box2{
      background-color: green;
      position: fixed;
    }
    .box3{
      background-color: blue;
    }
    .box4{
      height: 2000px;
      background-color: yellow;
    }*/

    /*.nav {
      width: 100%;
      height: 45px;
      background: url("../image/call.jpeg") no-repeat center top;
      background-color: red;
      position: fixed;
    }
    .content{
      width: 100%;
      height: 2000px;
      background-color: green;
    }
    div img:first-child{
      width: 100px;
      height: 80px;
      position: fixed;
      top: 200px;
      left: 0;
    }
    div img:last-child{
      width: 100px;
      height: 80px;
      position: fixed;
      top: 200px;
      right: 0;
    }
    a{
      width: 45px;
      line-height: 45px;
      text-align: center;
      position: fixed;
      bottom: 100px;
      right: 10px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.5);
    }*/

    /*.father1{
      width: 300px;
      height: 300px;
      background-color: red;
      position: absolute;
      left: 150px;
      z-index: 3;
    }
    .son1{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      left: 350px;
      top: 200px;
    }
    .father2{
      width: 300px;
      height: 300px;
      background-color: green;
      position: fixed;
      top: 150px;
      left: 150px;
      z-index: 2;
    }
    .son2{
      width: 100px;
      height: 100px;
      background-color: yellow;
      position: absolute;
      top: 100px;
      left: 350px;
    }
    .father3{
      width: 300px;
      height: 300px;
      background-color: brown;
    }
    .son3{
      width: 100px;
      height: 100px;
      background-color: pink;
    }*/
    </style>
  </head>
  <!-- <body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
    <span>I am span.</span> -->

    <!-- <input type="text" name="" value="">
    ![](../image/call.jpeg) -->

    <!-- <div class="box1">
      <div class="box2">
        <div class="box3">

        </div>
      </div>
    </div> -->

    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div> -->

    <!-- <div class="box">
      <div class="box1">

      </div>
    </div> -->

    <!-- <ul>
      <li>服裝城</li>
      <li>美妝店</li>
      <li>京東超市</li>
      <li>全球購
        ![](../image/call.jpeg)
      </li>
      <li>閃購</li>
      <li>團(tuán)購</li>
      <li>拍賣</li>
      <li>金融</li>
    </ul> -->

    <!-- <div class="">
      ![](../image/o.gif)
      ![](../image/call.jpeg)
      ![](../image/call.jpeg)
      <p>哎呦呦，真好看，真好玩</p>
    </div> -->

    <!-- <div class="">
      ![](../image/o.gif)
      <span class="leftArrow">&lt</span>
      <span class="rightArrow">&gt</span>

      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>

    </div> -->



    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
    <div class="box4">

    </div> -->

    <!-- <div class="nav">

    </div>
    <div class="content">
      ![](../image/o.gif)
      ![](../image/o.gif)
    </div>
    <a href="#">返回</a> -->

    <!-- <div class="father1">
      <div class="son1">

      </div>
    </div>
    <div class="father2">
      <div class="son2">

      </div>
    </div>
    <div class="father3">
      <div class="son3">

      </div>
    </div> -->

  </body>
</html>

第146課定位

1、定位流分類

1.1相對定位
1.2絕對定位
1.3固定定位
1.4靜態(tài)定位

相對定位：相對于自己以前在標(biāo)準(zhǔn)流中的位置來移動

{
  position:relative;
  top:20px;
  //left right bottom
}

相對定位是不脫離標(biāo)準(zhǔn)流的，會繼續(xù)在標(biāo)準(zhǔn)流中的占用一份空間

第147課相對定位注意點

1、相對定位是不脫離標(biāo)準(zhǔn)流的，會繼續(xù)在標(biāo)準(zhǔn)流中的占用一份空間
2、在相對定位中同一個方向上的定位屬性只能使用一個
3、由于相對定位是不脫離標(biāo)準(zhǔn)流，所以在相對定位中是區(qū)分塊級元素／行內(nèi)元素／行內(nèi)塊級元素

4、由于相對定位是不脫離標(biāo)準(zhǔn)流，并且相對于定位元素會占用標(biāo)準(zhǔn)流中的位置，
所以當(dāng)給相對定位的元素設(shè)置margin／padding等屬性時會影響標(biāo)準(zhǔn)流的布局
也就是margin／padding會在未發(fā)生相對定位的位置添加，
同時相對定位會在添加margin／padding后重新定位

相對定位應(yīng)用場景

1、用于對元素進(jìn)行微調(diào)
2、配合后面學(xué)習(xí)的絕對定位來使用

第148課絕對定位

絕對定位：相對于body來定位

{
  position: absolute;
  top: 0px;
  right: 0px;
}

注意點：

1、絕對定位的元素是脫離標(biāo)準(zhǔn)流的
2、絕對定位的元素是不區(qū)分塊級元素／行內(nèi)塊級元素／行內(nèi)元素的，均可設(shè)置width、height

第149課絕對定位參考點

規(guī)律

1、默認(rèn)情況下所有的絕對定位的元素，無論有沒有祖先元素，都會以body作為參考點
2、如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，
那么這個絕對定位就會以定位流的那個祖先元素作為參考點
2.1只要是這個絕對定位元素的祖先元素都可以
2.2指定的定位流包含：相對定位／絕對定位／固定定位，不包含靜態(tài)定位
2.3就近元素作為參考點

第150課絕對定位注意點

1、如果一個絕對定位的元素是以body作為參考點，那么其實是以網(wǎng)頁屏幕的寬高作為參考點，
而不是以整個網(wǎng)頁的寬度和高度作為參考點
2、一個絕對定位的元素會忽略祖先元素的padding

第151課絕對定位子絕父相

相對定位弊端：不會脫離標(biāo)準(zhǔn)流，會繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間，所以不利于布局界面
絕對定位弊端：默認(rèn)情況下絕對定位的元素會以body作為參考點，
所以會隨著瀏覽器屏幕的寬高的變化而變化

避免兩者弊端，標(biāo)簽處添加小標(biāo)

子絕父相：子元素用絕對定位，父元素用相對定位

第152課絕對定位-水平居中

1、只需要設(shè)置絕對定位元素的left：50%；
2、設(shè)置絕對定位元素的margin-left：負(fù)的絕對定位元素的寬度的一半

第153課定位練習(xí)-團(tuán)購界面

0 = 0px 當(dāng)值為0時，可以省略px
當(dāng)一個元素蓋在另一個元素上，一定要想到定位流，同時想到子絕父相
當(dāng)用到精靈圖時，選擇作為背景圖片

第154課定位練習(xí)-焦點圖

一個練習(xí)

第155課定位流-固定定位

固定定位和背景關(guān)聯(lián)方式很像，

背景定位可以讓背景圖片不隨著滾動條的滾動而滾動,background-attachment: fixed;
而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動,position:fixed;

注意點：

1、固定定位的元素是脫離標(biāo)準(zhǔn)流的，不會占用標(biāo)準(zhǔn)流中的空間
2、固定定位和絕對定位一樣不區(qū)分行內(nèi)元素／塊級元素／行內(nèi)塊級元素

第156課定位練習(xí)-新浪首頁

圖片堆積而成，沒有圖片使用自己圖片代替

第157課定位流-z-index 屬性

1、IE瀏覽器不支持默認(rèn)定位
2、一個元素默認(rèn)情況下就是靜態(tài)定位
3、z-index
默認(rèn)情況下所有的元素都有一個默認(rèn)的z-index屬性，取值是0.
z-index屬性的作用是專門用于控制定位流元素的覆蓋關(guān)系的

1、默認(rèn)情況下定位流的元素會蓋住標(biāo)準(zhǔn)流的元素
2、默認(rèn)情況下定位流的元素后面編寫的會蓋住前面編寫的
3、如果定位流的元素設(shè)置了z-index屬性，那么誰的z-index屬性比較大，誰就顯示在上面

注意點
從父現(xiàn)象

1、如果兩個元素的父元素都沒有設(shè)置z-index屬性，
那么誰的z-index屬性比較大誰就顯示在上面
2、如果兩個元素的父元素設(shè)置了z-index屬性，誰的父元素的z-index屬性比較大誰就顯示在上面

內(nèi)容參考

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

第十八章定位

第十八章定位

第146課定位

第147課相對定位注意點

第148課絕對定位

第149課絕對定位參考點

第150課絕對定位注意點

第151課絕對定位子絕父相

第152課絕對定位-水平居中

第153課定位練習(xí)-團(tuán)購界面

第154課定位練習(xí)-焦點圖

第155課定位流-固定定位

第156課定位練習(xí)-新浪首頁

第157課定位流-z-index 屬性

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

第十八章 定位

第146課 定位

第147課 相對定位注意點

第148課 絕對定位

第149課 絕對定位參考點

第150課 絕對定位注意點

第151課 絕對定位子絕父相

第152課 絕對定位-水平居中

第153課 定位練習(xí)-團(tuán)購界面

第154課 定位練習(xí)-焦點圖

第155課 定位流-固定定位

第156課 定位練習(xí)-新浪首頁

第157課 定位流-z-index 屬性

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

第十八章定位

第146課定位

第147課相對定位注意點

第148課絕對定位

第149課絕對定位參考點

第150課絕對定位注意點

第151課絕對定位子絕父相

第152課絕對定位-水平居中

第153課定位練習(xí)-團(tuán)購界面

第154課定位練習(xí)-焦點圖

第155課定位流-固定定位

第156課定位練習(xí)-新浪首頁

第157課定位流-z-index 屬性