CSS 定位 靜態 絕對 相對 固定 粘性定位

2021-10-20 12:01:46 字數 2783 閱讀 9531

提問: 以下情況使用標準流或者浮動能實現嗎?

某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子.

提問: 以下情況使用標準流或者浮動能實現嗎?

當我們滾動視窗的時候,盒子是固定螢幕某個位置的。

以上效果,標準流或浮動都無法快速實現,此時需要定位來實現。

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

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

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

定位 = 定位模式 + 邊偏移 。

定位模式用於指定乙個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。

定位模式決定元素的定位方式 ,它通過 css 的 position 屬性來設定,其值可以分為四個:

邊偏移就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

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

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

語法相對定位的特點:(務必記住)

它是相對於自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置)。

原來在標準流的位置繼續占有,後面的盒子仍然以標準流的方式對待它。

因此,相對定位並沒有脫標。它最典型的應用是給絕對定位當爹的。。。

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

絕對定位的特點:(務必記住)

如果沒有祖先元素或者祖先元素沒有定位,則以瀏覽器為準定位(document 文件)。

如果祖先元素有定位(相對、絕對、固定定位),則以最近一級的有定位祖先元素為參考點移動位置。

絕對定位不再占有原先的位置。(脫標)

所以絕對定位是脫離標準流的

加了絕對定位的盒子不能通過 margin:0 auto 水平居中,但是可以通過以下計算方法實現水平和垂直居中。

① left: 50%;:讓盒子的左側移動到父級元素的水平中心位置。

② margin-left: -100px;:讓盒子向左移動自身寬度的一半。

弄清楚這個口訣,就明白了絕對定位和相對定位的使用場景。

這個「子絕父相」太重要了,是我們學習定位的口訣,是定位中最常用的一種方式這句話的意思是:子級是絕對定位的話,父級要用相對定位。

① 子級絕對定位,不會占有位置,可以放到父盒子裡面的任何乙個地方,不會影響其他的兄弟盒子。

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

③ 父盒子布局時,需要占有位置,因此父親只能是相對定位。

這就是子絕父相的由來,所以相對定位經常用來作為絕對定位的父級。

總結: 因為父級需要占有位置,因此是相對定位, 子盒子不需要占有位置,則是絕對定位

當然,子絕父相不是永遠不變的,如果父元素不需要占有位置,子絕父絕也會遇到

固定定位是元素固定於瀏覽器可視區的位置。主要使用場景: 可以在瀏覽器頁面滾動時元素的位置不會改變。

固定定位的特點:(務必記住)

以瀏覽器的可視視窗為參照點移動元素。

固定定位不占有原先的位置。

固定定位也是脫標的,其實固定定位也可以看做是一種特殊的絕對定位。

固定定位小技巧: 固定在版心右側位置。

小演算法:

讓固定定位的盒子 left: 50%. 走到瀏覽器可視區(也可以看做版心) 的一半位置。

讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置

就可以讓固定定位的盒子貼著版心右側對齊了。

粘性定位可以被認為是相對定位和固定定位的混合。 sticky 粘性的

粘性定位的特點:

以瀏覽器的可視視窗為參照點移動元素(固定定位特點)

粘性定位占有原先的位置(相對定位特點)

必須新增 top 、left、right、bottom 其中乙個才有效

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

在使用定位布局時,可能會出現盒子重疊的情況。此時,可以使用 z-index 來控制盒子的前後次序 (z軸)

語法:定位特殊特性

絕對定位和固定定位也和浮動類似。

脫標的盒子不會觸發外邊距塌陷

浮動元素、絕對定位(固定定位)元素的都不會觸發外邊距合併的問題。

絕對定位(固定定位)會完全壓住盒子

浮動元素不同,只會壓住它下面標準流的盒子,但是不會壓住下面標準流盒子裡面的文字()

但是絕對定位(固定定位) 會壓住下面標準流所有的內容。

浮動之所以不會壓住文字,因為浮動產生的目的最初是為了做文字環繞效果的。 文字會圍繞浮動元素

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...

CSS中的靜態定位 固定定位 絕對定位和相對定位

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!靜態定位 html元素的預設值,即沒有定位,元素出現在正常的流中。靜態定位的元素不會受到top,bottom,left,right影響。固定定位 元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動 middle相對定位 層級關係為 ...

前端CSS 相對定位,絕對定位,固定定位

position relative 必須先宣告,自己要相對定位了,left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...