CSS定位

四種定位方式:(由元素設(shè)置position屬性確定定位方式)

1.static(靜態(tài)定位)----默認(rèn)值,標(biāo)準(zhǔn)文檔流正常位置(html中的位置),處于標(biāo)準(zhǔn)文檔流中

2.relative(相對定位)----相對自身原有(正常)位置偏移,處于標(biāo)準(zhǔn)文檔流中

3.absolute(絕對定位)----相對非默認(rèn)定位的首個父元素(包含塊)偏移,脫離標(biāo)準(zhǔn)文檔流

4.fixed(固定定位)----相對瀏覽器窗口偏移來定位

·相對定位(position:relative)

定位特點:

--相對于自身原有位置(標(biāo)準(zhǔn)文檔流正常位置)進(jìn)行偏移

--仍處于標(biāo)準(zhǔn)文檔流中(自身原有位置所占空間保留

--隨即擁有偏移量letf/right/top屬性&空間堆疊z-index屬性


·絕對定位(position:absolute)

定為特點:

--建立已包含塊為基準(zhǔn)的定位(相對于static定位以外(非靜態(tài)定位)的第一個父元素

? 沒有這樣的父元素就是相對<html>偏移

--完全脫離標(biāo)準(zhǔn)文檔流,對于html中的其他兄弟元素不造成任何影響

--隨即擁有偏移量left/right/top屬性&空間堆疊z-index屬性


最后編輯于
?著作權(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)的外補(bǔ)...
    _Yfling閱讀 14,149評論 1 92
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流,浮動,絕對定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,974評論 0 15
  • 當(dāng)在這一個頁面上實現(xiàn)布局和定位有幾種不同的技術(shù)。使用哪種技術(shù),很大程序上取決于內(nèi)容和目標(biāo)頁面,因為有很多技術(shù)比別人...
    lulu_c閱讀 1,221評論 0 5
  • 在CSS中關(guān)于定位的內(nèi)容是:position:relative | absolute | static | fix...
    feelinghappy618閱讀 704評論 0 0
  • CSS有3種基本的定位機(jī)制:標(biāo)準(zhǔn)流、浮動和絕對定位。除非專門指定,否則所有元素都在標(biāo)準(zhǔn)流中定位。也就是說,標(biāo)準(zhǔn)流中...
    WHealer閱讀 383評論 3 2

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