position的用法

*星號(hào)為便于本人個(gè)人理解的理解方式,如理解有誤請(qǐng)指出

position: absolute

使元素脫離原來的文檔流,相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊,則相對(duì)于body元素,即相對(duì)于瀏覽器窗口。
會(huì)生成一個(gè)塊級(jí)框。
*相當(dāng)于將元素放置到原來頁面層的上層圖層,對(duì)下層不會(huì)產(chǎn)生干擾。
top / bottom / left / right 屬性使元素相對(duì)于默認(rèn)位置進(jìn)行移動(dòng)。(默認(rèn) top: 0; left:0,元素位于父包含塊的左上角)

position: relative

使元素相對(duì)于原來的位置移動(dòng),但文檔流中保留元素初始所占的空間。
*相當(dāng)于在原頁面層用透明色替代了元素,并元素置于上層圖層。
top / bottom / left / right 屬性使元素相對(duì)于原來位置進(jìn)行相對(duì)移動(dòng)。(默認(rèn) top: 0; left:0,元素不移動(dòng))

position: absolute 與 position: relative 的結(jié)合使用

前輩元素設(shè)置屬性 position: relative,其后輩元素設(shè)置屬性 position: absolute,可以使后輩屬性相對(duì)于前輩屬性的位置進(jìn)行定位布局。

position: fixed

生成絕對(duì)的定位,相對(duì)于瀏覽器窗口進(jìn)行定位。頁面滾動(dòng),元素的位置相對(duì)于始終不變。
*會(huì)生成一個(gè)塊級(jí)框。

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,180評(píng)論 1 92
  • 一、語法: position:static | relative | absolute | fixed 取值: s...
    陳宏閱讀 769評(píng)論 0 0
  • CSS position 屬性 這個(gè)屬性定義建立元素布局所用的定位機(jī)制。 任何元素都可以定位,不過絕對(duì)(absol...
    取名字咋這么難閱讀 742評(píng)論 2 8
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,858評(píng)論 1 45
  • -一- 安如醉站在烈焰莊外,輕輕用手撫摸過那對(duì)淺笑環(huán)。姐姐,我這便進(jìn)去為你報(bào)仇。 一朵梨花靜靜飄落,滑過淺笑環(huán)刃就...
    珞一心閱讀 498評(píng)論 0 0

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