css的position屬性值有哪些?有何區別?


css的position屬性值有哪些?有static、inherit、relative、absolute、fixed,都是用來規定元素的定位類型,還有一個z-index屬性,雖然不是position屬性的值,但是經常會搭配position屬性使用,用來控制定位元素的堆疊順序。

position屬性的值有何區別?

position屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。

光看定義,很多新手網友可能已經看暈了,別急,范如樂下面展開來講:

static:

static是默認值,也就是沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。詳情點擊:《css的position:static是什么意思?有什么作用?》。

inherit:

inherit是規定應該從父元素繼承 position 屬性的值。這個也很容易理解,比如A元素里面包含一個B元素,如果B元素寫上了position:inherit;,則會繼承A元素的position 屬性的值。有關父元素的詳細內容請點擊:《html中的父元素、子元素、兄弟元素是什么?》。

relative

position:relative是相對定位的意思,如果某元素添加了position:relative屬性,會把該元素設置為相對定位,該元素會變成一個有框的空間,那么,設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所占的空間仍保留。詳情點擊:《css的定位屬性position:relative是什么意思?怎么用?》。

absolute

position:absolute指的是絕對定位的意思,設置為絕對定位的元素框從文檔流完全刪除,并相對于其包含塊定位,包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像該元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。詳情點擊:《css的定位屬性position:absolute是什么意思?怎么用?》。

fixed

position:fixed指的是固定定位的意思,如果某元素添加了position:fixed屬性,會把該元素設置為固定定位,該元素會變成一個有框的空間,簡單理解就是,添加了position:fixed屬性的元素,會浮起來,相對于瀏覽器窗口進行定位。詳情點擊:《css的定位屬性position:fixed是什么意思?怎么用?》。

z-index屬性

z-index屬性設置元素的堆疊順序,當你想要控制某個元素的堆疊順序時,需要用到z-index屬性,簡單理解就是:我們知道平面的軸是x和y,x控制水平的方向,y控制垂直的方向,那么z軸,就是立體的那條軸,控制上下的方向。詳情點擊:《z-index屬性的作用是什么?怎么用?》。

學會了控制元素的位置,接下來,就要學習控制元素的大小了,也就是寬度和高度,詳情點擊:《css設置寬高用什么屬性?用width和height屬性》。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/8114.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: