揭開CSS的絕對定位真實的面紗(二)

2021-07-29 07:01:58 字數 849 閱讀 3009

乙個絕對定位的元素,如果父輩元素中出現了也定位了的元素,那麼將以父輩這個元素,為參考點。

需要注意一下幾點:

1.要聽最近的已經定位的祖先元素的,不一定是父親,可能是爺爺:

1 →  相對定位

2 →  沒有定位

3    → 絕對定位,將以box1為參考,因為box2沒有定位,box1就是最近的父輩元素

4 5 

1 →  相對定位

2 → 相對定位

3    → 絕對定位,將以box2為參考,因為box2是自己最近的父輩元素

4 1 

2.不一定是相對定位,任何定位,都可以作為參考點

1 → 絕對定位

2   → 絕對定位,將以div作為參考點。因為父親定位了。

3 子絕父絕、子絕父相、子絕父固,都是可以給兒子定位的。但是,工程上子絕、父絕,沒有乙個盒子在標準流裡面了,所以頁面就不穩固,沒有任何實戰用途。工程上,「子絕父相」有意義,父親沒有脫離標準劉,兒子脫離標準流在父親的範圍裡面移動。

1 → 絕對定位

2 → 相對定位

3 → 沒有定位

4   → 絕對定位,以box2為參考定位。

5 6 

7 3. 絕對定位的兒子,無視參考的那個盒子的padding。

下圖中,綠色部分是div的padding

,藍色部分是div的內容區域。那麼此時,div相對定位,p絕對定位。

揭開CSS的絕對定位真實的面紗(一)

二.絕對定位 絕對定位比相對定位更靈活。絕對定位的盒子,是脫離標準文件流的。所以,所有的標準文件流的性質,絕對定位之後都不遵守了。絕對定位之後,標籤就不區分所謂的行內元素 塊級元素了,不需要display block 就可以設定寬 高了 如下 1 span 絕對定位要有乙個參考點,絕對定位的參考點,...

揭開Socket程式設計的面紗

對tcp ip udp socket程式設計這些詞你不會很陌生吧?隨著網路技術的發展,這些詞充斥著我們的耳朵。那麼我想問 1.什麼是tcp ip udp?2.socket在 呢?3.socket是什麼呢?4.你會使用它們嗎?什麼是tcp ip udp?tcp ip transmission cont...

揭開Socket程式設計的面紗

對tcp ip udp socket程式設計這些詞你不會很陌生吧?隨著網路技術的發展,這些詞充斥著我們的耳朵。那麼我想問 1.什麼是tcp ip udp?2.socket在 呢?3.socket是什麼呢?4.你會使用它們嗎?什麼是tcp ip udp?tcp ip transmission cont...