CSS----定位(相對、絕對、固定)

定位:

????????????????? 指定的元素擺放到頁面的任意位置

????????????????? 通過定位可以任意的擺放元素

???? 通過position屬性來設(shè)置元素的定位,可選值:

????????????????? static:默認(rèn)值,元素沒有開啟定位

????????????????? relative:開啟元素的相對定位

????????????????? absolute:開啟元素的絕對定位

????????????????? fixed:開啟元素的固定定位

當(dāng)元素的position屬性設(shè)置為relative時,則開啟了元素的相對定位

?????????? 1.開啟元素的相對定位以后,不設(shè)置偏移量時,元素不會發(fā)生任何變化

?????????? 2.相對定位是相對于元素在文檔流中原來的位置進(jìn)行定位

?????????? 3.元素不會脫離文檔流

?????????? 4.會使元素提升一個層級

?????????? 5.不會改變元素的性質(zhì),塊還是塊,內(nèi)聯(lián)還是內(nèi)聯(lián)

當(dāng)position屬性值設(shè)置為absolute時,則開啟了元素的絕對定位

?????????? 1.開啟絕對定位,會使元素脫離文檔流

?????????? 2.開啟絕對定位,如果不設(shè)置偏移量,則元素的位置不會發(fā)生變化

?????????? 3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進(jìn)行定位的(一般情況,開啟了子元素的絕對定? 位,都會同時開啟父元素的相對定位)

如果所有的祖先元素都沒有開啟定位,則會相對于瀏覽器窗口進(jìn)行定位

?????????? 4.絕對定位會使元素提升一個層級

?????????? 5.絕對定位會改變元素的性質(zhì):

內(nèi)聯(lián)元素變成塊元素,塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開

當(dāng)元素的position屬性設(shè)置fixed時,則開啟了元素的固定定位

固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣

不同的是:

固定定位永遠(yuǎn)都會相對于瀏覽器窗口進(jìn)行定位

固定定位會固定在瀏覽器窗口某個位置,不會隨滾動條滾動





就算跌倒,也要豪邁的笑

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

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,163評論 1 92
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,445評論 2 66
  • 在相遇后 你往左而我往右 偶爾在交匯處留下了溫柔 當(dāng)相遇不再為彼此所感動 在毫不猶豫時做了決定 輕輕的離開 就像天...
    田萍閱讀 293評論 0 4
  • 許久沒有發(fā)表文章。因回故鄉(xiāng)陪親友,了卻羈絆、完成心愿、拾撿美好。 所收獲甚多,所情所想唯有感激。我愛的人們,愿你們...
    想_說閱讀 372評論 5 3
  • 健身剛好一年整,先亮成果: 我身高174,去年冬天胖到130j,通過健身瘦到116j,周圍人看到我都說我瘦了很多。...
    踩扁蘑菇閱讀 40,520評論 36 213

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