在前端開發中，經常會碰到使用定位的情況，常見的一種情況是將定位的元素的父級也開啟定位，通過參照父級元素來對元素進行定位，然而在實際開發中，情況遠遠不止一種，總的來說，定位元素參照的都是其包含塊，但是情況不同，包含塊也不一樣。
首先，解釋一下包含塊，一般來說，「根元素」的包含塊(也稱為初始包含塊)由使用者**建立。在html中，根元素就是html元素，不過有些瀏覽器會使用body作為根元素。在大多數瀏覽器中，初始包含塊是乙個視窗大小的矩形。
包含塊的情況：
1、對於乙個非根元素，如果其position的值是relative或者static，包含塊則由最近的塊級框、表單元素或者是行內塊祖先框的內容邊界構成。
2、對於乙個非根元素，如果其position的值是absolute，包含塊設定為最近的position的值不是static的祖先元素(可以是任何型別)。這個過程如下：
- 如果這個祖先元素是塊級元素，包含塊則設定為該元素的內邊距邊界，也就是由邊框界定的區域。
- 如果這個祖先是行內元素，包含塊則設定為該祖先元素的內容邊界。在從左向右讀的語言中，包含塊的上邊界和左邊界是該祖先元素中第乙個框內容區的上邊界和左邊界，包含塊的下邊界和右邊界是最後乙個框內容區的下邊界和右邊界。在從右向左讀的語言中，包含塊的有邊界對應於第乙個框右內容邊界，包含塊左邊界則取自最後乙個框左內容邊界。上下邊界也是一樣。
- 如果沒有祖先，元素的包含塊定義為初始包含塊。
還有一點需要注意，在設定定位偏移量時，其初始預設值是auto，而不是0！！！
CSS定位之 什麼是包含塊？
一 包含塊簡單說就是定位參考框或者定位座標參考係，元素一旦定義了定位顯示 相對 絕對 固定 都具有包含塊性質，它所包含的定位元素都將以該包含塊為座標系進行定位和調整。二 包含塊是視覺格式化模型的乙個重要概念，它與框模型類似，也可以理解為乙個矩形，而這個矩形的作用是為它裡面包含的元素提供乙個參考，元素...
包含塊 初始包含塊
浮動元素的包含塊為其最近的塊級祖先元素。定位 根元素的包含塊 也稱為初始包含塊 由使用者 建立，在html中，根元素就是html元素，不過有些瀏覽器會使用body作為根元素。在大多數瀏覽器中，初始包含塊是乙個視窗大小的矩形，不等於視窗。對於乙個非根元素，如果其position值是relative或s...
初始包含塊
網頁的視窗的結構 最外層 瀏覽器視窗 視口 初始包含塊 html根元素 body 1 doctype html 2 html 3 head 4 meta charset utf 8 5 title title 6 style 78 9網頁的視窗的結構 10最外層 瀏覽器視窗 視口 11初始包含塊 1...