CSS浮動(float)和定位(position)

float屬性

float屬性經(jīng)常用于制作Horizontal Menu(橫向菜單)和實現(xiàn)多列式網(wǎng)頁布局。屬性left和right,元素浮動之后,周圍的元素會從新排列,為了避免這種情況,使用clear屬性。

position定位

有五種屬性值:屬性static,relative,absolute,fixed,sticky

static

HTML 元素的默認值,即沒有定位,遵循正常的文檔流對象。
靜態(tài)定位的元素不會受到 top, bottom, left, right影響。

relative

相對定位:relative:相對定位是相對于元素在文檔中的正常位置--首先他出現(xiàn)在它所在的位置(即不設置position時的位置,然后通過垂直或者水平位置,讓這個元素“相對于”它的原始起點進行移動)-->即相對于該元素在文檔流中的正常位置進行偏移定位,原占位仍保留。相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊。

absolute

絕對定位:absolute:絕對定位是相對于元素“最近的已定位的祖先元素”(即是設置了相對定位或者絕對定位的祖先元素)。如果元素沒有已定位的祖先元素,那么它的位置則是相對于最初的包含塊(body)。相對于static定位意外的最相鄰近的父級元素進行偏移定位,即相對于其直接父級元素。絕對定位較少直接單獨使用在正常的文檔流中,而是配合子相對定位來進行更靈活更精準的定位。換言之,就是絕對定位主要運行與進行了相對定位的元素框架層里面,然后依據(jù)該層的最左上點作為基準進行偏移定位。

fixed

固定定位:fixed:相對于瀏覽器窗口進行定位所以元素的位置相對于瀏覽器窗口是固定位置及時窗口是滾動的他也不會移動,即固定定位是以瀏覽器窗口的左上點作為基點進行偏移定位的。其位置跟隨瀏覽器大小的變化而移動,應用較少,主要運行于瀏覽器窗口的貼邊定位。絕對定位同樣可以應用在固定定位的框架層里面。fixe定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。fixed定位的元素和其他元素重疊。
注意:對于這三種定位,被定位元素的位置都是通過“l(fā)eft”,“right”,“top”,"bottom",屬性進行指定的,需要將被這三種方式定位的對象還原到正常的文檔流中,可使用static屬性對其再次定位。當我們不設定元素的position屬性時默認的是static屬性。

sticky

sticky英文意思是粘貼,粘,所以可以把它稱為粘貼定位。position:sticky是基于用戶的滾動位置來定位的。粘貼定位的元素是依賴于用戶的滾動,在position:relative與position:absolute之間切換。它的行為就像position:relative,而當頁面滾動超出目標區(qū)域后,他的標簽就像positioin:fixed,會固定在目標位置。(元素定位表現(xiàn)為跨越特定閾值前為相對定位,之后為固定定位)

z-index

z-index屬性指定了一個元素的堆疊順序,一個元素可以有正數(shù)或者負數(shù)的堆疊順序,數(shù)字越大層級越高優(yōu)先顯示,若兩個定位元素重疊,沒有指定z-index,最后定位在HTML代碼中的元素將被顯示在最上面。

簡要總結(jié)

脫離文檔 原占位保留 清除浮動方式 z-index屬性
浮動(float) clear:both 不支持
相對定位(relative) position:static 支持
絕對定位(absolute) position:static 支持
固定定位(fixed) position:static 支持
靜態(tài)定位(static) 不支持

參考鏈接:https://www.runoob.com/css/css-positioning.html
https://www.runoob.com/css/css-float.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容