CSS定位屬性

2022-06-19 06:57:09 字數 1653 閱讀 8512

定位屬性

position屬性

1.static:沒有特別的設定,遵循基本的定位規定,不能通過z-index進行層次分級

2.relative

3.absolute

4.fixed:固定定位,這裡他所固定的物件是可視視窗而並非是父級元素,可以通過z-index進行層次分級

文件流:指的是元素按照其在html中的位置順序決定排布的過程主要的形式是自上而下(塊級元素),一行接一行,每一行從左至右(行內元素)。

文件流=行級元素+行內元素正常排列構成的頁面

z-index層疊分級

1.auto:遵從其父物件的定位

2.number:無單位的整數值,可以為負數。z-index使用證書表示元素的前後位置,數值越大,就會顯示在相對靠前的位置

注: z-index只能出現在出現在定位屬性出現之後;當position的值不為static值時

關於position定位的7種情況:

1)當父元素為static時,當子元素為absolute時,子元素脫離文件流,參考body原點進行定位

2)當父元素為static時,當子元素為relative時,子元素不會脫離文件流,參考自身位置進行定位

3)當父元素為relative時,當子元素為absolute時,子元素脫離文件流,參考父級元素進行定位

4)當父元素為relative時,當子元素為relative時,子元素不會脫離文件流,參考自身位置進行定位

5)當父元素為absolute時,當子元素為absolute時,子元素脫離文件流,參考父級元素進行定位

6)當父元素為absolute時,當子元素為relative時,子元素不會脫離文件流,參考自身進行定位

7)當子元素為fixed時,脫離文件流,參考body原點進行定位

CSS定位屬性

position 把元素放置到乙個靜態的 相對的 絕對的 或固定的位置中。top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left 定義了定位元素左...

CSS 定位屬性

使用定位屬性可以控制元素的位置,包括相對定位和絕對定位兩種方式。相對定位是指允許元素在相對於文件布局的原始位置上進行偏移,而絕對定位是指允許元素與原始的文件布局分離且任意定位。1.1定位方式 position 使用定位方式屬性可以控制瀏覽器應如何定位html 元素。語法 position stati...

定位屬性CSS

第1個盒子 第2個盒子 第3個盒子 鏈結1鏈結2 鏈結3鏈結4 鏈結5 position屬性 static 預設值,沒有定位!relative 相對定位!相對於自身原來的位置!也就是現在的位置,按照定位能還原到原本的位置!設定相對定位的盒子,原本的位置會被留下來!absolute 絕對定位 相對於離...