如果元素有屬性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下麵的步驟: 1、如果祖先是塊級元素,containing block 由祖先的 padding edge(除 margin, border 外的區 ...
如果元素有屬性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下麵的步驟:
1、如果祖先是塊級元素,containing block 由祖先的 padding edge(除 margin, border 外的區域 的最小矩形) 形成。
2、否則(不是inline),containing block 取決於祖先的 direction 屬性。
如果 direction 是 ltr(左到右),祖先產生的第一個盒子的上、左內容邊界是 containing block 的上方和左方,祖先的最後一個盒子的下、右內容邊界是 containing block 的下方和右方。
如果 direction 是 rtl(右到左),祖先產生的第一個盒子的上、右內容邊界是 containing block 的上方和右方,祖先的最後一個盒子的下、左內容邊界是 containing block 的下方和左方。
如果都找不到,則為 initial containing block。
補充:
1. static(預設的)/relative:簡單說就是它的父元素的內容框(即去掉padding的部分)
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body),根元素也是initial containing block