元素定位的區別以及用法

2021-10-09 10:34:19 字數 630 閱讀 1448

屬性

屬性值作用

position

fixed

固定定位––

–position

relative

相對定位––

–position

absolute

絕對定位

固定定位:以瀏覽器為參照物進行定位,元素脫離文件流;

相對定位:不脫離文件流,元素有父元素的話,以父元素為參照物進行定位,沒有父元素的話,以瀏覽器為參照物進行定位;

絕對定位:脫離文件流;

看有沒有父元素

有父元素:再看父元素有沒有寫相對定位,父元素有寫相對定位,以父元素為參照物進行定位。

如果父元素沒有寫相對定位,以瀏覽器為參照物進行定位。

沒有父元素:絕對定位以瀏覽器位參照物進行定位。

期間會用到的屬性

屬性屬性值

作用z-index

number(數字)數字越大越不容易被覆蓋

層疊樣式(必須要與定位配合)––

–opacity

number(0-1)

透明度(ie8以下瀏覽器不支援)––

–filter

alpha(opacity=0-100)

透明度的相容寫法

元素定位以及圓角樣式

相對定位 lang en charset utf 8 titletitle body div father first second third style head father first 第乙個盒子div second 第二個盒子div third 第三個盒子div div body html...

浮動 定位 以及其區別

浮動 元素的浮動是指設定了浮動屬性的元素會脫離標準普通 流的控制,移動到其父元素中指定位置的過程。語法 float left right none 預設 注意 1.浮動的元素要有父元素 2.浮動後的元素類似元素行內塊元素,即使行內元 素浮動後也可以設定寬高.類似不代表是,浮動後的盒子可以設定寬高,但...

call apply bind的用法以及區別

通過 可以看出區別 var name window var age 10 function fun1 name var person fun1.call person,小明 對於bind來說,用法更加的靈活 var fun2 fun1.bind person,小明 fun2 fun1 看一下在控制台...