絕對定位 CSS 8 CSS布局 定位

2021-10-14 16:21:29 字數 1218 閱讀 2582

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

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

定位+定位模式+邊偏移

(1)定位模式

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

(2)邊偏移

就是定位的盒子移動到最終位置。有top、bottom、left、right4個屬性。

定義元素在各個方向上相對於其父元素邊線的距離。

注:只有定位才有的屬性,標準流和浮動是沒有的。

元素的預設的定位方式,無定位的意思(很少用到),可以簡單理解為就是標準流。

選擇器
元素在移動位置的時候,相對它原來的位置。

選擇器
特點:元素在移動位置時,相對它祖先元素的位置。

選擇器
特點:含義:子級是絕對定位的話,父級要用相對定位由來:元素固定於瀏覽器可視區的位置。在瀏覽器頁面滾動時元素的位置不會改變。

選擇器
特點:可以理解為相對定位和固定定位的混合。

選擇器
特點: 跟頁面滾動搭配,相容性特別差,ie不支援

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

選擇器
(1)絕對定位和固定定位也和浮動類似,不同點在於:

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

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

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

浮動元素不同,只會壓住它下面標準流的盒子,但是不會壓住下面標準流盒子裡面的文字/,但是絕對定位/固定定位會壓住下面標準流所有的內容。

【案例】做乙個輪播圖的布局效果

<

>

執行結果如圖:

css 定位連線 css絕對定位

定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。絕對定位的元素的位置相對於最近的已定位祖先元素 如果元素...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點...