定位 (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.浮...