簡單整理下css中的幾種定位 大神勿入

2021-07-15 15:31:41 字數 586 閱讀 4519

在css中我們常用的定位有以下幾種:

1,static(預設定位)2,relative(

相對定位

)3,absolute(絕對定位)4,fixed(固定定位)

1:static 預設值,按照文件流的布局,布局到哪了是**

2: relateive 相對定位,可以通過top left right bottom對元素本身所在的位置進行微調,注意相對定位的物件是它自己原來的位置,它不會脫離文件流,它原來的位置不會被侵占。

3:absolute:絕對定位,也是通過top left right bottom,它的定位是相對於自己的祖先容器,從父集開始第乙個為relative或者是absolute,fixed的容器,

「一旦乙個元素使用了絕對布局,它就從文件流中脫離出來,後續的元素把它所佔的空間填充。」

4:fixed 固定定位,它是相對於視窗進行定位的,不會隨頁面的移動而移動

注:1,在使用定位發生相互覆蓋的情況,我們可以使用z-index屬性來調整次序,z-index值越大,層次越高,能覆蓋比他z-index值小的元素,

z-index值 只對設定了定位為relative或者是absolute的元素起作用

css 的幾種定位

css position 定位 position 屬性值的含義 static html 元素的預設值,也就是說沒有定位,遵循正常的文件流物件。靜態定位的元素不會受到 top,bottom,left,right影響。div relative 相對定位元素的定位是相對其自身的位置進行定位。left ri...

css中的幾種定位的區別

這是沒有加任何定位的文件流 1 直接上圖看效果,下面這張圖是給紅色div設定了position absolute 絕對定位,你也看到絕對定位使紅色div脫離了文件流。2 現在給紅色的div 設定相對定位 position relative 從下圖可以看出紅色div並沒有脫離文件流,我們可以給此時的紅...

對CSS中幾種定位的認識

1 靜態定位 static left right top bottom z index等屬性無效。2 絕對定位 absolute 將被賦予絕對定位的元素從文件流中拖出,使用left right top bottom等屬性相對於其最接近的乙個最有定位設定的父級元素進行絕對定位,如果元素的父級沒有設定定...