盒子模型(2)

  1. 定位:
    (1):psition屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。
    (2):可以使用position屬性把一個(gè)元素放置到網(wǎng)頁中的任何位置。
    (3):可選值:
    — static
    — relative
    — absolute
    — fixed

  2. 相對定位:
    (1):每個(gè)元素在頁面的文檔流中都有一個(gè)自然位置。相對于這個(gè)位置對元素進(jìn)行移動(dòng)就稱為相對定位。周圍的元素完全不受此影響。
    (2):當(dāng)將position屬性設(shè)置為relative時(shí),則開起了元素的相對定位。
    (3):當(dāng)開啟了相對定位以后,可以使用top、right、bottom、left四個(gè)屬性對元素進(jìn)行定位。

  3. 相對定位的特點(diǎn):
    (1):如果不設(shè)置元素的偏移量,元素位置不會發(fā)生改變。
    (2):相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變。
    (3):相對定位不會改變元素原來的特性。
    (4):相對定位會使元素的層級提升,使元素可以覆蓋文本流中的元素。

  4. 絕對定位:
    (1):絕對定位指使元素相對于html元素或離他最近的祖先定位元素進(jìn)行定位。
    (2):當(dāng)將position屬性設(shè)置為absolute時(shí),則開啟了元素的絕對定位。
    (3):當(dāng)開啟了絕對定位以后,可以使用top、right、bottom、left四個(gè)屬性對元素進(jìn)行定位。

  5. 絕對定位的特點(diǎn):
    (1):絕對定位會使元素完全脫離文本流。
    (2):絕對定位的塊元素的寬度會被其內(nèi)容撐開。
    (3):絕對定位會使行內(nèi)元素變成塊元素。
    (4):一般使用絕對定位是會同時(shí)為其父元素指定一個(gè)相對定位,以確保元素可以相對于父元素進(jìn)行定位。

  6. 固定定位:
    (1):固定定位的元素會被鎖定在屏幕的某個(gè)位置上,當(dāng)訪問者滾動(dòng)網(wǎng)頁是,固定元素會在屏幕上保持不動(dòng)。
    (2):當(dāng)將position屬性設(shè)置為fixed時(shí),則開啟了元素的固定定位。
    (3):當(dāng)開啟了固定定位以后,可以使用top、right、bottom、left四個(gè)屬性對元素進(jìn)行定位。
    (4):固定定位的其他特性和絕對定位類似。

7.:-index:
(1):當(dāng)元素開啟定位以后就可以設(shè)置z-index這個(gè)屬性。
(2):這個(gè)屬性可以提升定位元素所在的層級。
(3):z-index可以指定一個(gè)整數(shù)作為參數(shù),值越大元素顯示的優(yōu)先級越高,也就是z-index值較大的元素會顯示在網(wǎng)頁的最上層。

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,209評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,894評論 1 45
  • 一、盒子模型 1、盒子CSS處理網(wǎng)頁時(shí),它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見的盒子里,我們只需要將相應(yīng)的盒子擺放到網(wǎng)...
    瘦不下去了閱讀 2,306評論 0 0
  • display 我們不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom。...
    PySong閱讀 84評論 0 0
  • display 我們不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom。...
    PySong閱讀 105評論 0 0

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