CSS之定位模式介紹(重要) 子絕父相

2021-10-19 17:38:10 字數 1580 閱讀 8593

1、標準流或者浮動能實現,某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子?

2、當我們滾動視窗的時候,某些盒子是固定在某個位置的。

以上效果,標準流和浮動很難快速實現,此時需要定位來實現。

所以:1、浮動(float)可以讓多個塊級盒子一行沒有縫隙排列顯示,經常用於橫向排列盒子。

2、定位(position)則是可以讓 盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置,並且可以壓住其他盒子。

定位:將盒子定在某一位置,所以定位也是在擺盒子,按照定位的方式移動盒子。

定位 = 定位模式 + 邊偏移

1、定位模式:指定元素在文件中的定位方式

2、邊偏移:確定位置

top、bottom、left、right

1、靜態定位(static)(了解)

靜態定位:是元素預設的定位方式,無定位的意思。

語法:

選擇器

2、相對定位 relative (重要)相對定位:元素在移動的時候,是相對於它原來位置來說的(自戀型)。

語法:

選擇器

相對定位的特點:

相對定位是給絕對定位當爹的。。。。

3、絕對定位 absolute(重要)

絕對定位:是元素在移動位置的時候,是相對於它祖先元素來說的(拼爹型)。

語法:

選擇器

絕對定位的特點:

4、固定定位 fixed

固定定位:是元素固定於瀏覽器的科室區域。

主要使用場景:可以在瀏覽器頁面滾動時對元素的位置不改變。

語法:

選擇器

固定定位

固定定位的特點:

返回頂部

5、粘性定位 sticky (了解)粘性定位:可以被認為是相對定位和固定定位的混合。

語法:

選擇器

粘性定位的特點:

頂部導航欄

跟著頁面滾動搭配使用,相容性差,ie不支援

1、絕對定位和相對定位到底有什麼使用場景呢?

2、為什麼說相對定位給絕對定位當爹呢?

因為絕對定位不佔位置,若是後面接著標準流,就會出現後面標準流混亂現象,所以需要絕對定位的需要乙個限制它的父級元素;

所以父級的定位模式有:相對定位(用的多),固定定位、絕對定位選擇。

子絕父相意思:子級是絕對定位,父級要用相對定位。

子級絕對定位,不會占有位置,可以放到父盒子的任意位置,不影響其他兄弟盒子。

父盒子要加定位,限制子盒子在父盒子內顯示。

父盒子布局是要占有位置,因此父盒子定位為相對定位。

css定位,相對定位,絕對定位,子絕父相

定位 定位模式 邊偏移 定位模式 用於指定元素的定位方式,通過 position 屬性設定 邊偏移 根據定位模式確定最終位置,通過 top bottom left right 四個屬 性設定 邊偏移 top 頂端偏移量,定義元素相對於其參照元素上邊線的 距離。bottom 底部偏移量,定義元素相對於...

css 子絕父相實現乙個簡單的層定位例子

子絕父相 顧名思義,父元素設定相對定位,該父元素裡面的子元素設定絕對定位。從而使子元素能在這個父元素裡面 游動 不會跑到別的文件流。乙個簡單例子效果如下 lang en charset utf 8 name viewport content width device width,initial sc...

CSS盒子模式之 相當定位和絕對定位

7 給包含塊乙個高度,或者說給定位物件的父級設定乙個高度。不然也許顯示的結果並不是你想要的。在下面的例子中,如果你本意要實現下面效果 把小盒子在父盒子中的左上角垂直往下偏移,上方留出一塊區域,如果你刪除了box1的高度會怎麼樣呢?自己測試一下吧。執行 框 8 放置絕對定位對像到可視區外會出現滾動條。...