絕對定位元素若無已定位的祖先元素,它是相對於什么進行定位的?
絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那么它的位置相對於最初的包含塊。
在CSS中,有事一個元素的位置和尺寸的計算都相對於一個矩形,這個矩形被稱作包含塊。包含塊是一個相對的概念,比如子元素的初始化布局總是在父元素的左上角,這就是一個相對的概念。其中父元素就是一個參照物,但實際上這些元素都是根據包含塊所在的位置進行布局,每個元素都會生成一個包含塊,但這個包含塊是虛無的,你看不到也摸不着,只是一個概念。
包含塊的最主要的作用就是給它里面的元素一個位置上的參照也就是它應該從哪里開始擺放。包含塊並不會限制它里面元素的大小如果里面的元素比包含塊大,那么超出的部分就會被溢出。一個元素的位置和尺寸與它的包含塊息息相關,而元素會為它的子孫元素創建包含塊,但這並不代表這個包含塊就是它的父元素,再次強調包含塊只是一個概念。包含塊最終的樣子是由元素自身和它的祖先元素的樣式等決定的。
包含塊的創建:
1.在HTML中,根元素的包含塊叫作初始包含塊,具體創建由客戶端決定
2.當定位值為fixed,則包含塊由視口創建
3.當定位值為relative、static或沒有設置定位屬性,則包含塊由最近的父元素或祖先元素創建
4.當定位值為absolute,則包含塊由最近的定位值relative、absolute、fixed創建,如果沒有定位的祖先元素,則包含塊為初始包含塊(具體由客戶端來決定)
5.當祖先元素是行內元素時,那么包含塊取決於父元素或祖先元素的direction屬性
初始包含塊:
1. 根元素的包含塊是一個矩形,叫做初始化包含塊;
2. 對於 【連續媒體】就是,初始化包含塊的 尺寸等於viewport的尺寸,起點是canvas的原點;
3. 初始化包含塊的方向(direction)等同於根元素的方向;
4. 初始化包含塊不是viewport,只是尺寸一樣;