html中的幾種定位方式

2021-07-24 12:39:39 字數 655 閱讀 6778

1,static(預設)

當你沒有為乙個元素(例如div)指定定位方式時,預設為static,也就是按照文件的流式(flow)定位,將元素放到乙個合適的地方。所以在不同的解析度下,採用流式定位能很好的自適合,取得相對較好的布局效果。

一般來說,我們不需要指明當前元素的定位方式是static——因為這是預設的定位方式。除非你想覆蓋從父元素繼承來的定位系統。

left,top屬性對static沒有效果,static是靠margin這些定位的。

2,relative(相對定位)

在static的基礎上,如果我想讓乙個元素在他本來的位置做一些調整(位移),我們可以將該元素定位設定為relative,同時指定相對位移(利用top,bottom,left,right)。

有一點需要注意的是,相對定位的元素仍然在文件流中,仍然佔據著他本來佔據的位置空間——雖然他現在已經不在本來的位置了。

3,absolute(絕對定位)

如果你想在乙個文件(document)中將乙個元素放至指定位置,你可以使用absolute來定位,將該元素的position設定為absolute,同時使用top,bottom,left,right來定位。

如果沒有父元素,位置是相對於body來進行的。

絕對定位會使元素從文件流中被刪除,結果就是該元素原本佔據的空間被其它元素所填充。

HTML中的幾種定位方式

當你沒有為乙個元素 例如div 指定定位方式時,預設為static,也就是按照文件的流式 flow 定位,將元素放到乙個合適的地方。所以在不同的解析度下,採用流式定位能很好的自適合,取得相對較好的布局效果。一般來說,我們不需要指明當前元素的定位方式是static 因為這是預設的定位方式。除非你想覆蓋...

html定位的幾種方式 CSS中常用的幾種定位方式

第一類float定位 即浮動定位 這種定位方式很簡單,只需規定乙個浮動的方向 如 float left 就表示這個元素向左邊擺放 它的定位是相對于父元素容器 如果該元素設定了浮動,後面緊鄰的則會受到浮動的影響,因此需要後面的元素若要不受影響,則要在後面清除浮動 可用clear both 等方法 在兩...

html的幾種定位

css的定位有以不幾種 1.static定位 這是乙個預設的方式 對static而言,left 和right是沒有效果的 2.relative定位 相對定位 元素框移某個距離 left和 top 元素本身形狀不發生變化,它原本所佔的空間仍保留,從這一角度,好像元素仍在文件流中一樣。特別說明 rela...