CSS中的定位

2021-10-12 17:23:07 字數 1483 閱讀 9621

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示 ,經常用於橫向排列盒子。定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置,並且可以壓住其他盒子。

定位 = 定位模式 + 邊偏移

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

static靜態定位

relative相對定位

absolute絕對定位

fixed固定定位

邊偏移就是定位的盒子移動到最終位置。有topbottomleftright4 個屬性。

邊偏移屬性

舉例描述

toptop:80px頂端偏移量,定義元素相對於其父元素上邊線的距離

bottombottom:80px底部偏移量,定義元素相對於其父元素下邊線的距離

leftleft:80px左側偏移量,定義元素相對於其父元素左邊線的距離

rightright:80px右側偏移量,定義元素相對於其父元素右邊線

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

語法:

選擇器

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

語法:

選擇器

元索在移動位置的時候,是相對於它祖先元索來說的。

.box-bd ul li

.box-bd ul li em

元素固定於瀏覽器可視區的位置。

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

語法:

選擇器

語法:

選擇器

定位模式

是否脫標

移動位置

static靜態定位

否不能使用邊偏移

relativ相對定位

否(占有位置)

相對於自身位置移動

absolute絕對定位

是(不占有位置)

帶有定位的父級

fixed固定定位

是(不占有位置)

瀏覽器可視區域

sticky粘性定位

否(占有位置)

瀏覽器可視區域

css中的定位

本文只是個額外的說明,作為基礎知識的補充和額外的關注點 定位的分類以及預設定位 fix,static,relative,absolute 各個定位的包含塊是怎麼樣的 1.relative和static的包含塊由最近的塊級框,表單元格或行內塊祖先框的內容邊界構成 2.fixed的包含塊是視窗本身 3....

css中的定位

在css中避免不了定位,在實際開發中,關於定位模組有很多,定位有三種型別,絕對定位,相對定位,固定定位 1.絕對定位 position absolute 絕對定位 使元素脫離文件流,使元素提公升了半個層級 如果不指定定位父級,那麼絕對定位相對於文件可視區定位 塊元素 寬度不自適應,如果不設定大小,大...

CSS中的定位

static定位 position static 是元素在文件流中的預設定位,一般不會顯示寫出來,他會按照先後順序排列元素。fixed 定位 position fixed 跟他的名字一樣,使用這個定位,可以讓元素釘 在螢幕可視區域中,定位也是 相對於可視區域定位的。relative相對定位 posi...