次我們來說一下，HTML網頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現在網頁的各個位置，網頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學習一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素無法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進行定位的，我們有left，top，right，bottom，五個屬性分別對應 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。

我們來通過代碼和結果來看一下：

上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]

我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。

這個結果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置

代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

用了fixed的效果展示。

以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。

ss 中的定位，是布局中常用的一種方法，它可以使html元素脫離文檔流，重新定位。語法如下：

position: static|relative|absolute|fixed

position 有四個值，static（默認靜態定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位），通常配合left、top及z-index屬性使用（static除外）。

• left —— 定位元素相對于定位點的左距離
• top —— 定位元素相對于定位點的上距離
• z-index ——定位元素的層級，當有多個定位元素上，通過此屬性調整元素的顯示層級，值越大的顯示在最上面。默認如果不設置z-index屬性，則會按照其在文檔流中的先后位置顯示。

static（靜態定位）

靜態定位很簡單，html元素默認就是靜態定位，和正常情況下html元素在文檔流中的排版一樣。left、top和z-index屬性對應靜態定位來說不起任何左右，如下圖示例：

圖1中的模塊1，雖然設置了position:static,但是其表現和沒有設置是一樣的，按照標準文檔流進行排版。

relative（相對定位）

相對定位是html元素相對于它原來在標準文檔流中的位置來定位的。如果不設置top、left的話它和靜態定位一樣，不同之處就是它可以設置top、left和z-index屬性，如下圖示例：

代碼：

顯示效果：

圖3中模塊2使用了相對定位，脫離正常的文檔流，相對于原始位置左邊50px，頂部30px，但其在文檔流中的位置依然存在，只是視覺上相對原來的位置有偏移。

相對定位的元素寬度默認和塊級元素一樣，寬度100%；

absolute（絕對定位）

絕對定位時當父級元素也是定位元素（包括相對定位、絕對定位、固定定位）時，它就相對于父級元素的左上角定位，如果父級元素沒有定位或者是靜態定位，那就相對于瀏覽器窗口左上角定位。如下示例：

代碼：

顯示效果：

圖5中模塊3和模塊2-1都設置為絕對定位，模塊3的父級沒有定位，模塊2-1的父級是模塊2（相對定位）。所以模塊3相對于頁面左上角位置定位，模塊2-1相對于模塊2左上角定位。

絕對定位不保留原來的位置，完全是脫離文檔流，且其寬度變成不是100%（類似行內元素），它通常都是和有定位的父級元素一塊使用才有意義。

fixed（固定定位）

固定定位，通俗講就是固定到屏幕上，它和絕對定位一樣完全脫離文檔流，不保留原來的空間位置。唯一的區別就是它是始終都是相對于瀏覽器窗口左上角定位，不管其父級元素設置了定位。如下示例：

代碼：

顯示效果：

圖7中模塊4的設置為固定定位，它的父級時模塊2（相對定位），可以看出和模塊2-1（絕對定位）的區別，模塊4不是相對于父級的。

再看下面這個示例，當滾動滾動條時模塊4始終定在那塊不動。

關于z-index

注意看上面圖8中，模塊4顯示在模塊3下面，看下圖模塊3的z-index明明比模塊4的小，為什么會顯示在模塊4上面？

原因是模塊4的父級模塊（相對定位），它的z-index是100和模塊3相同，又因為模塊3元素在模塊2元素后面，所以模塊3顯示在模塊4上面，如果把模塊2的z-index改成101，如下圖：

模塊4顯示在模塊3上面了，所以z-index的屬性是同級元素相互進行比較大小。

總結

在網頁布局中，定位在早期使用較多，現在不建議過多使用定位，只有在特殊情況下使用，比如返回頂部按鈕效果，或左側導航欄，菜單欄固定定位，不跟隨頁面滾動等。

本篇主要知識點：

感謝關注，歡迎指正錯誤及補充。

上篇：前端入門——浮動float

言

有時候，我們想閱讀頁面中某段精彩的內容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置，方便用戶的閱讀。

一、 純 html 實現

1. 利用 id 為標記的錨點

這里作為錨點的標簽可以是任意元素。

  <a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標簽的 name 屬性作為錨點

這里作為錨點的標簽只能是 a 標簽。

  <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <div id="abb">bbb</div>

注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。

二、 js 實現

1. 利用 scrollTo()

window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉到該位置的DOM節點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計算該 DOM 節點到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉到以 id 為 aa 標記的錨點 a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉到該位置的DOM節點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：