CSS中position屬性的四個值

2021-09-27 13:34:46 字數 735 閱讀 3523

詳見:

先看下各個屬性值的定義:

1、static(靜態定位):預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

2、relative(相對定位):生成相對定位的元素,通過top,bottom,left,right的設定相對於其正常(原先本身)位置進行定位。可通過z-index進行層次分級。  

3、absolute(絕對定位):生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。

4、fixed(固定定位):生成固定定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。

static與fixed的定位方式較好理解,在此不做分析。下面對應用的較多的relative和absolute進行分析:

定位為relative的元素脫離正常的文字流中,但其在文字流中的位置依然存在。

定位為absolute的層脫離正常文字流,但與relative的區別是其在正常流中的位置不再存在。同時,正常流中的內聯元素不知道頁面有absolute元素,也就是說,正常流中的內聯元素不會繞開這個絕對元素。

具有float浮動屬性的元素與absolute元素不同,正常流中的內聯元素會繞開浮動元素。

CSS中的Position屬性

size large size large css的position很重要,有以下幾個值 static,relative,absolute,fixed。static 靜態定位。如果你沒有設定position屬性,那麼預設就是static。top,left,bottom,right等屬性,在stati...

css中的 position屬性

當前元素是文件流,並且處於自己應該在的位置。一般我們不需要設定這一屬性,除非想要覆蓋之前設定的定位。當前元素是文件流,沒有設定top bottom left和right屬性時是在他本來的位置上,但是可以通過設定top bottom left和right屬性來對元素進行移動,元素的移動會覆蓋下面的文件...

CSS中的position屬性

在html中網頁可以看成乙個立體的空間,乙個完整的頁面是由很多個頁面堆積形成的,如下圖所示 css中position屬性有四個可選值,它們分別是 static absolute fixed relative。position static 無定位 該屬性值是所有元素定位的預設情況,在一般情況下,我們...