浮動可以讓多個塊級盒子一行沒有縫隙排列顯示 ,經常用於橫向排列盒子。定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置,並且可以壓住其他盒子。
定位 = 定位模式 + 邊偏移定位模式決定元素的定位方式 ,它通過 css 的
position
屬性來設定,其值可以分為四個:值語義
static
靜態定位
relative
相對定位
absolute
絕對定位
fixed
固定定位
邊偏移就是定位的盒子移動到最終位置。有top
、bottom
、left
和right
4 個屬性。
邊偏移屬性
舉例描述
top
top:80px
頂端偏移量,定義元素相對於其父元素上邊線的距離
bottom
bottom:80px
底部偏移量,定義元素相對於其父元素下邊線的距離
left
left:80px
左側偏移量,定義元素相對於其父元素左邊線的距離
right
right: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...