css中元素的position屬性詳解

2021-09-20 13:07:08 字數 630 閱讀 4526

position屬性有五個可以設定的值,分別是static,absolute,relative,fixed,inherit

static:預設值,無定位;元素仍然存在於標準文件流中

absolute:絕對定位,元素相對於它的第乙個定位父級元素進行定位。元素的位置可以通過top,right,bottom,left屬性進行設定;使用了絕對定位的元素會生成乙個塊級框,無論它是行內元素還是塊級元素,故使用了絕對定位的元素可以隨意的設定寬高了(不需要再將元素設定成塊級元素或者行內塊元素);元素將不再佔據它原本所佔的位置,會脫離標準文件流;

relative:相對定位,相對與其原本所佔的位置進行定位;元素的位置可以通過top,right,bottom,left屬性進行設定;使用該定位之後的元素不會脫離文件標準流;

fixed:固定定位,相對於瀏覽器視窗進行定位;元素會脫離文件標準流;

inherit:繼承,元素會繼承其父元素所設定position的值;

以上:使用了absolute和fixed進行定位的元素都會生成乙個塊級框,無論它原來是塊級元素還是行內元素,且都會脫離文件標準流,不再佔據元素原來的位置;

標準文件流就是元素會自動在網頁中按照從上到下,從左到右的流式進行排列;

css中元素的定位 position

網頁中元素的定位使用position屬性。position的可用值有 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 left top right 以及 bottom ...

css中元素定位

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

css中元素的定位

float浮動 定義元素在哪個方向上浮動,通常是用在影象上,然後使文字圍繞周圍,但是,實際使用中,任何元素都可以浮動了,並且,設定此屬性後,該元素會生成乙個塊級框,近乎等於將其轉化為了塊級元素 position屬性中的absolute relative和fixed,先說absolute絕對定位,設定...