定位position介紹

2022-07-16 12:09:15 字數 1372 閱讀 7575

定位 (position): 是一種更加高階的布局手段

-通過定位可以將元素擺放到頁面的任意位置。

使用position屬性來設定定位

可選值: static 預設值 元素是靜止的,沒有開啟定位

relative 開啟元素的相對定位

absolute 開啟元素的絕對定位

fixed  開啟元素的固定定位

sticky 開啟元素的粘滯定位

例子: 開啟相對定位

position:relative;

top:100px; // 向上偏移100畫素

bottom:10px;

left:10px;

right:10px;

相對定位的特點:

1.如果不設定偏移量,元素不會發生任何變化。

2.相對定位參照元素在文件中的位置進行定位。

3.相對定位會提公升元素的層級。

4.相對定位不會使元素脫離文件流。

5.相對定位不會改變元素性質。

絕對定位的特點:

1.如果不設定偏移量,元素的位置不會發生變化。

2.元素會從文件流中脫離。

3.絕對定位會改變元素的性質,行內元素變成塊元素,塊的寬度被內容撐開。

4.絕對定位會使元素提公升乙個層級。

5.絕對定位元素是相對於包含塊進行定位的。

包含塊(containing block)

正常情況下:

包含塊就是離當前元素最近的祖先塊元素

例如:22221111

div.box2的包含塊就是div.box1

span元素的包含塊 是div.box ; 

em元素的包含塊  是div.box;

絕對定位的包含塊

離它最近的開啟了定位的祖先元素。

如果所有的祖先元素都沒有開啟定位,則相對於根元素()定位。

固定定位(fixed):絕大部分跟相對定位相同。

唯一不同的是參照瀏覽器視口,不會隨滾動條滾動改變。

粘滯定位(sticky): 相容性不好

當元素位置到達某個位置後,不再滾動。

CSS定位position使用介紹

一 定義 設定元素的偏移效果,一般配合left top right bottom屬性共同作用,用於元素定位。二 position 屬性值介紹 說明 1 文件流 元素未定位前 偏移前 的原本所佔的空間仍保留 非文件流 元素未定位前 未偏移前 的原本所佔的空間由後面元素填充,被其占用。2 相對元素 作為...

CSS定位屬性 position 相關介紹

position屬性用來定義元素的定位方式。static 預設值 absolute 絕對定位 fixed 固定定位 relative 相對定位 sticky 粘性定位 css3新增 定位的作用 以下就五個屬性值展開介紹 一 position static 預設值,無定位 此時 top right b...

定位和position定位

定位有 普通流定位 浮動定位 相對定位 絕對定位 固定定位 特點普通定位 被稱為文件流定位,是頁面元素預設的定位方式 塊級 從上到下,獨佔一行 行級 從左到右,不獨佔一行 浮動定位 1.浮動元素脫離文件流,未浮動元素上前補位 2.浮動元素會停靠在父級元素的左邊或者右邊,亦或者緊跟其他元素邊緣 3.浮...