原創(chuàng)：itsOli @前端一萬小時本文首發(fā)于公眾號「前端一萬小時」本文版權歸作者所有，未經授權，請勿轉載！本文節(jié)選自“語雀”私有付費專欄「前端一萬小時 | 從零基礎到輕松就業(yè)」

??????以下鏈接為本文最新勘誤篇章——《讓“盒子”動起來：② “定位”和 BFC》

1. 有幾種定位方式？分別是如何實現定位的？參考點是什么？使用場景是什么？ 2. z-index 有什么作用？如何使用？ 3. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。 4. 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例？

上方面試題“參考答案詳解”，請點擊此處查看獲取方式！

---

前言： 這一篇我們主要探討“定位”和 BFC 是怎樣讓“盒子”動起來的。

學習方法依然是：打開 JS Bin，拷貝代碼運行查看效果，然后搞定每一行代碼的前世今生。

1 什么是“定位”

“定位”就是通過設置 position 屬性的值來脫離正常的文檔流。

2 “定位”分哪幾類

2.1 相對定位

源碼及效果展示
HTML

<div class="box1">1</div> <div class="box2">2</div> <div class="box1">3</div>

CSS

.box1, .box2 {width: 50px;height: 50px;border: 2px solid; } .box2 {position: relative;/*relative 是相對于它原本正常流的位置進行偏移，視覺上看它是移動了，但它原本所占用的文檔流的空間是沒有變化的，對其他元素來說，它還是在那里的，故其他元素位置是不會有變化的。*/top: 10px;left: 10px; }

2.2 絕對定位

當你設置為絕對定位后，文檔流上的其他元素就看不見你了。就認為你不存在！如果存在多個絕對定位元素，那么這些絕對定位元素也互相看不見。

源碼及效果展示
HTML

<div class="box1">1</div> <div class="box2">2</div> <div class="box1">3</div>

CSS

.box1, .box2 {width: 50px;height: 50px;border: 2px solid; } .box2 {color: red;position: absolute;top: 10px;left: 10px;/*?這個值是相對于誰做偏移呢？答：首先它會從自己的父元素里邊去找，看看自己的父元素里邊有沒有定位，這個定位包括 relative、absolute、fix，如果有的話就相對于它；如果沒有的話，就再從父元素的父元素里邊去找，如果有的話就相對于它；如果再沒有，就一直找到我們的 body。*/ }

2.2.1 ?絕對定位的值是相對誰來取值做偏移

源碼及效果展示
HTML

<div class="container"><div class="box1">1</div><div class="box2">2</div><div class="box1">3</div> </div>

CSS

html {border: 3px solid blue;/* 3??最后，如果都沒有，那么 box2 的絕對定位值就相對于這里，到頭了。 */} body {margin: 40px;border: 1px solid red;/*2??其次，如果下邊 container 沒有 position，而這里有定位（relative、absolute、fixed），那么 box2 的絕對定位值就相對于這里：position: relative;*/ }container {margin-top: 40px;padding: 40px;background: yellow;/*1??首先，如果 box2 父元素這里有定位（relative、absolute、fixed），那么 box2 的絕對定位值就相對于這里：position: relative;??而這里用 relative 是最好的，因為一個元素本身設置 relative，卻不設置值的話，就等同于沒設置。那它就依然在普通流中，它還是一個普通元素，那它自己的位置也沒發(fā)生變動，卻可以給其子元素作為相對的錨點。*/ }.box1, .box2 {width: 50px;height: 50px;border: 2px solid; } .box2 {position: absolute;top: 0px;left: 10px; }/* ??所以，我們在使用絕對定位的時候，一定要設置好定位的參考點（錨點）。 一般來說，我們絕對定位的參考點都是相對于其父容器。所以原則上是：一個元素設置絕對定位 absolute， 那它的父容器設置定位為 relative。*/

2.2.2 z-index

元素使用了絕對定位后，就如浮動一樣，有了“塊盒子”的特性。

由于使用絕對定位之后，產生元素覆蓋的問題，z-index 可以解決元素之間覆蓋順序的問題，設置它的層疊順序。同級元素，數值越大，越靠近視覺點；不同父元素，只要父元素越大，那么整體就越靠近視覺點，而不管其子元素大小情況。

• z-index： 顯示器顯示的圖案是一個二維平面，用 x 軸和 y 軸來表示位置屬性。
  為了表示三維立體的概念，如顯示元素的上下層的疊加順序，引入了 z-index 屬性來表示 z 軸上一個元素在疊 加順序上的上下立體關系。
  z-index 值較大的元素將疊加在 z-index 值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。
  z-index 屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed 的對象），用來確定定位元素 在垂直于顯示屏方向（稱為 Z 軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設置的 z-index 會是無效的。
• 相同 z-index 誰上誰下？
  • 如果兩個元素都沒有定位發(fā)生位置重合現象或者兩個都已定位元素且 z-index 相同發(fā)生位置重合現象，那么按文檔流順序，后面的覆蓋前面的。
  • 如果兩個元素都沒有設置 z-index，使用默認值，一個定位一個沒有定位，那么定位元素覆蓋未定位元素。
• 父子關系處理：
  • 如果父元素 z-index 有效，那么子元素無論是否設置 z-index 都和父元素一致，會在父元素上方；
  • 如果父元素 z-index 失效（未定位或者使用默認值），那么定位子元素的 z-index 設置生效。

2.3 固定定位

position: fixed;

相對于瀏覽器的窗口進行定位。因此當滾動產生時，固定定位元素依然處于窗口的某個位置不動。

3 用“定位”還是用“浮動”

• 大布局、自適應，用“浮動”————浮動一般和響應式結合的比較多；
• 小元素、固定寬高，用“定位”————一般只適用于一些很小的 icon ；

結合實際情況是關鍵。
比如說，網頁頭像上的未讀消息，我們一般都是選擇用“定位”才能很好的實現。凡是能蓋住其他東西的也是“絕對定位”。

4 小實戰(zhàn)：實現 navbar

源碼及效果展示
HTML

<nav><ul><li><a href="#">首頁</a></li><li><a href="#">作品</a></li><li><a href="#">更多</a><ul class="child"><li><a href="#">GitHub</a></li><li><a href="#">博客</a></li> <li><a href="#">知乎</a></li></ul> </li></ul> </nav>

CSS

* {margin: 0;padding: 0; } ul {list-style: none; } a {color: #333;text-decoration: none; } nav {width: 500px;margin: 10px auto 0;box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.3);/*這里邊的這幾個值：第一、二個值表示這個陰影的水平、垂直的偏移；4px 表示模糊度；1px 是這個模糊的一個延展；rgba 是這個模糊的顏色。*/ } nav::after {content: '';display: block;clear: both; } /* 由于我們用了浮動，我們需要清除浮動來撐開父容器。 */nav>ul>li {position: relative;/* 給下邊 .child 的絕對定位”偏移值“加一個“錨點”。 */float: left;/* 把這個選擇器層級里的 li 水平排列。 */} nav>ul>li:hover .child {display: block; } /* .child 默認是隱藏的，當我鼠標放到“更多”這個 li 上的時候才顯示，并顯示為 block。 */nav a {display: block;padding: 10px 10px;/*記著，我們要想點擊的范圍很大，我們是需要在 a 鏈接上來加 padding 的。如果在 li 上加 padding，那么點擊范圍依然在字上。但要注意，由于 a 鏈接是個行內元素，所以如果這里只單單加 padding，那其實他的寬高是沒有變化的，只是背景色變大了，它會出現很多諸如“遮擋”的后果。故，我們需要讓其顯示為 block。我們沒有用 inline-block 是因為：用 inline-block 即它同時還是有行內特性，會導致"收縮"——即寬度由文本內容寬度決定。想要撐開，而不受內容寬度影響，那就需要用 block。*/min-width: 50px;/* 這里加了一個“最小的寬度”的用途是把這個 a 鏈接里邊的文字內容撐開，使任何一個可點擊的文本都不換行。*/ } nav a:hover {color: #fff;background: rgba(0, 0, 0, 0.4); } nav .child {position: absolute;/*設置了絕對定位，我們才可以想把這個 .child 放哪里就放哪里，因為父容器發(fā)現不了它。而其他方式（比如浮動、或不用）是達不到理想的效果的。*/top: 100%;/* 100% 就表示按照 li 的高度。 */box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.3);display: none;/*.child 默認是"隱藏"的——display: none; ，當我鼠標放到“更多”這個 li 上的時候再顯示。*/ }

5 BFC

??相關前置知識，請先閱讀文章：
《CSS 基本視覺格式化：① “塊盒子”格式化》
《CSS 基本視覺格式化：② “行內盒子”格式化》

• 在正常流中，盒子要么屬于塊級格式化上下文，要么屬于內聯格式化上下文。
  每個渲染區(qū)域用 fomating context 表示，它決定了其子元素如何去定位，以及和其他元素的關系和相互作用。
  BFC 全稱 Block Formating Context。
• BFC 是一個獨立的渲染區(qū)域，只有 block-level box 參與。它規(guī)定了內部 block-level box 如何布局，并且與這個區(qū)域外部毫不相關。

5.1 哪些元素會具有 BFC 的條件

display 屬性為 block、list-item、table 的元素，會產生 BFC。也就是“塊元素”。

5.2 什么情況下可以讓元素產生 BFC

• float 屬性不為 none：
  如果一個元素增加了一個屬性叫 float，那這個元素本身也產生了一個塊級格式化上下文。
• position 為 absolute 或 fixed ；
• display 為 inline-block、table-cells、flex、或者 inline-flex ；
• overflow 不為 visible (為 hidden、auto、scroll )。

我們之所以要了解這個 BFC，是因為我們希望通過了解它的特性來實現我們需要的一些效果。或者當出現了某個問題的時候，我們能夠去解釋這個問題，知道是為什么，進而解決它或找到替代方案。

5.3 BFC 布局規(guī)則特性

• ①：在 BFC 中，盒子從頂部開始垂直地一個接一個的排列；
• ②：盒子垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰盒子的 margin 會發(fā)生重疊；
• ③：在 BFC 中，每一個盒子的左外邊距應該和包含塊的左邊接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此！
• ④：BFC 的區(qū)域不會與浮動的盒子產生交集，且是緊貼浮動的邊緣；
• ⑤：計算 BFC 的高度時，浮動盒子的高度也參與計算；
• ⑥：BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此！

5.4 BFC 常見的用途

• 清除元素內部浮動
  對應規(guī)則：⑤ 計算 BFC 的高度時，浮動盒子的高度也參與計算。
• 解決外邊距合并問題
  對應規(guī)則：② 盒子垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰盒子的 margin 會發(fā)生重疊。
• 制作自適應兩欄布局
  對應規(guī)則： ③ 在 BFC 中，每一個盒子的左外邊距應該和包含塊的左邊接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此！

④ BFC 的區(qū)域不會與浮動的盒子產生交集，且是緊貼浮動的邊緣。

5.4.1 清除元素內部浮動

?問題：
源碼及效果展示

<ul class="navbar"><li><a href="#">1 首頁</a></li><li><a href="#">2 產品</a></li><li><a href="#">3 服務</a></li><li><a href="#">4 關于</a></li> </ul> .navbar {list-style: none;border: 1px solid #ccc;/*加一個背景色也沒效果：background: pink;*/} .navbar>li {float: left;margin-left: 15px; }/*由于浮動元素脫離了文檔流，所以他的父元素是看不見他的。 這里對于 navbar 來說，他認為里邊沒有什么 li 來把它撐開, 因為 li 已經浮動了，那沒有東西撐開它，它就會認為高度為 0。*/

??解決方式：

• 通過“清除浮動”來解決——在文章《讓盒子動起來：①浮動》中已作解答；
• 通過給父元素創(chuàng)建 BFC，添加 overflow: hidden; 樣式：

對應規(guī)則：⑤ 計算 BFC 的高度時，浮動盒子的高度也參與計算。

源碼及效果展示

<ul class="navbar"><li><a href="#">1 首頁</a></li><li><a href="#">2 產品</a></li><li><a href="#">3 服務</a></li><li><a href="#">4 關于</a></li> </ul> .navbar {list-style: none;border: 1px solid #ccc;overflow: hidden; } .navbar>li {float: left;margin-left: 15px; }

5.4.2 解決外邊距合并問題

?問題：
在文章《CSS 基本視覺格式化：① 塊盒子格式化》中，我們知道：

垂直格式化的另一個重要方面是垂直相鄰 margin 的合并。 這種合并行為只應用于 margin，如果元素有 padding 和邊框，padding 和邊框是不會合并的。當兩個或更多垂直 margin 相遇時，他們將形成唯一一個 margin，這個 margin 的高度等于兩個發(fā)生疊加的 margin 的高度中的較大者。
??注意：當一個元素包含在另一個元素中時，彼此相鄰的 margin-bottom 和 magin-top 也會發(fā)生疊加，取較大者。

源碼及效果展示

<div class="box1">1</div> <div class="box2">2</div> .box1 {color: #fff;width: 100px;height: 100px;margin-bottom: 50px;background: blue; }.box2 {color: #fff;width: 100px;height: 100px;margin-top: 100px;background: pink; }

??解決方式：
將垂直方向上的盒子放在不同的 BFC 中，margin 就不會重疊了。

對應規(guī)則：② 盒子垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰盒子的 margin 會發(fā)生重疊。

源碼及效果展示

<div class="box1">1</div><div class="ct"><div class="box2">2</div> </div> <!-- 我們在 box2 的外層包裹一層容器，并觸發(fā)該容器生成一個 BFC。 那么兩個 box 就不屬于同一個 BFC，就不會發(fā)生 margin 重疊了！ --> .ct {overflow: hidden; /* 觸發(fā)該容器生成一個 BFC */ }.box1 {color: #fff;width: 100px;height: 100px;margin-bottom: 50px;background: blue; }.box2 {color: #fff;width: 100px;height: 100px;margin-top: 100px;background: pink; }

5.4.3 制作自適應兩欄布局

?問題：
在文章《讓“盒子”動起來：① 浮動》中，我們通過加 margin-left 或 margin-right 的方式制作“有縫隙”的兩欄布局的效果。

??但如果要求兩欄布局中間沒有縫隙，該怎么辦呢？

?由于：

③ 在 BFC 中，每一個盒子的左外邊距應該和包含塊的左邊接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此！

源碼及效果展示

<div class="aside">側邊欄固定寬度</div> <div class="main">Hey guys，我正在這個平臺發(fā)放“前端一萬小時”這個專欄的一系列文章。<br>這個專欄我已經完成了“從零基礎到就業(yè)”相關的文章。<br>"從零基礎到就業(yè)"包含 150+ 篇干貨文章，300+ 道經典筆試、面試題。<br>如果你對本系列文章感興趣，歡迎關注 「公眾號：前端一萬小時」，并點擊菜單欄“輕松入職”來加入我們的“一萬小時計劃”！祝順利^^…… </div> .aside {color: #fff;width: 150px;height: 100px;background: red;float: left; } .main {color: #fff;background: blue;height: 200px; }

??解決方式：

④ BFC 的區(qū)域不會與浮動的盒子產生交集，且是緊貼浮動的邊緣。

通過觸發(fā) main 生成 BFC，來實現自適應無縫隙兩欄布局：

源碼及效果展示

.main {overflow: hidden; /* 觸發(fā) BFC */ }.aside {color: #fff;width: 150px;height: 100px;background: red;float: left; } .main {color: #fff;background: blue;height: 200px; }

---

后記： 通過兩篇兄弟文章，我們算是讓“盒子”動了起來。接下來 3 篇文章，我們就讓“這個可以動的盒子”更優(yōu)雅的“展示”。

祝好，qdywxs ? you！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的定位到元素后获取其属性_（11）让“盒子”动起来：② “定位”和 BFC | CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。