CSS樣式布局 position屬性

2021-08-25 08:21:20 字數 1597 閱讀 9348

position屬性:用於定義建立元素布局所用的定位型別,該屬性有多個值:

描述

static

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

relative

生成相對定位的標籤,相對於標籤原來位置進行定位。因此,「left:20」 會向標籤的left位置新增 20 畫素。

absolute

生成相對定位的標籤,相對於標籤本身第乙個position為非 static父元素進行定位。標籤的位置通過 「left」, 「top」, 「right」 以及 「bottom」 樣式屬性進行規定。如果該標籤所在的父標籤均沒有設定position為非 static,則相對於瀏覽器視窗進行定位,但是此時元素會隨著滾動調的滑動而滑動。

fixed

生成絕對定位的標籤,相對於瀏覽器視窗進行定位,此時元素不會隨著滾動調的滑動而滑動。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

(文件流又稱正常流,是預設情況下html元素排版布局過程中元素會自動按照自上而下或從左往右進行流式排放的一種順序)

注意:任何元素都可以定位,但absolute或fixed元素會生成乙個塊級框,不論該元素本身是不是塊級框。relative元素會相對於它在正常流中的預設位置偏移。ie瀏覽器都不支援"inherit"屬性值 。

當乙個標籤使用了position css樣式屬性,如果其樣式屬性值為非static(不考慮inherit)則該標籤將脫離正常文件流,如果又沒有指定 「left」, 「top」, 「right」 以及 「bottom」 樣式屬性的屬性值,則該標籤只待在原來位置,但已經脫離正常文件流

下為演示**:

//加空格用於複習div的塊級元素性質

//加了空格後,c的div會自動換行 block的屬性所致

演示注釋:

position中:

relative 是相對於標籤原來的位置點進行定位的  仍存在於文件流中

fixed 是相對於整個瀏覽器來定位的  直接無視瀏覽器裡面的標籤元素 類似於「浮起來」了 

absolute是相對於上一級[如. b對z]第乙個(父)元素(要求為非static屬性)來定位的  而且定位標準是依據父元素的外界邊框來確定的

下為演示結果:

CSS布局定位 position

取值 static absolute fixed relative static 預設值。無特殊定位 物件遵循html定位規則。absolute 絕對定位 將物件從文件流中拖出 可層疊 用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在...

css的定位(Position 布局

當乙個元素具有position absolute屬性時,它的位置由下列規則確定 1 如果該元素沒有trbl,以父元素 直接父元素 中在其之前的元素逐一定位後,緊跟最後乙個元素定位,若之前沒有其他元素,則以父元素的左上角定位。沒有直接父元素時,以其之前的元素逐一定位後,緊跟最後乙個元素定位。2 如果設...

關於CSS的布局 position屬性

position有五個屬性值 relative absolute fixed static inherit,w3school給出了如下的 說明 下面以乙個demo來說明不同屬性值之間的區別以及對於頁面布局的影響 id parent id sub1 sub1div id sub2 sub2div di...