定位存在的意義和不同定位之間的區別

2021-10-09 11:18:18 字數 1385 閱讀 6046

某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子,這樣的效果,標準流或浮動都無法快速實現,此時需要定位來實現。

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

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

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

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

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

定位模式

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

static

靜態定位

relative

相對定位

absolute

絕對定位

fixed

固定定位

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

邊偏移屬性

示例描述

toptop :   80px

頂部偏移量,定義元素相對於其父元素上邊線的距離

bottom

bottom :  80px

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

left

left  :  80px

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

right

right :  80px

右側偏移量,定義元素相對於其父元素右邊線的距離

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

語法:選擇器 

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

選擇器 

相對定位的特點:

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

原來在標準流的位置繼續占有,後面的盒子仍然以標準流的方式對待它(不脫標,繼續保留原來位置)

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

語法:選擇器

絕對定位的特點:

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

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

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

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

語法:選擇器 

固定定點的特點:

以瀏覽器的可視視窗為參照點移動元素,跟父元素沒有任何關係不隨滾動條滾動

固定定位不在占有原來的位置

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

不同定位下DIV的移動方式

div的移動方式 div的移動方式是和它的定位方式有關的,div的定位方式有如下四種 relative absolute static fixed 自己寫 的時候會經常犯乙個錯誤,不管ta的定位是怎樣,拿來直接就是top left,但是效果卻不能實現。因為不同的定位移動方式也不同 relative ...

簡述定位系統的意義

近兩年關於人員定位的系統或解決方案層出不窮,涉及wifi uwb 藍芽等各種技術,電廠 化工廠 監獄 醫院 隧道等各類場景。室內定位市場從一片藍海變成了紅海,各方豪雄你方唱罷我登場。作為甲方,被這突如其來的熱情弄得不知所措,回神之後留下一句發自肺腑的疑問 人員定位系統有啥子用呢?人員定位系統的意義 ...

Selenium不同的定位方式

driver.findelement by.id id值 driver.findelement by.name name值 driver.findelement by.linktext 鏈結的全部文字內容 driver.findelement by.partiallinktext 鏈結的部分文字內容...