前端CSS五中元素定位類型

頭號(hào)碼甲 2021-10-17

展開全文

元素想通過底部、頂部、左側(cè)、右側(cè)屬性定位是必須先設(shè)定position的屬性值

posistion屬性的五個(gè)值：static、relative、fixed、absoulte、sticky

static定位

HTML的默認(rèn)定位，正常文檔流對(duì)象
不受top、bottom、left、right的影響

relative定位
- 相對(duì)定位元素的定位是相對(duì)其正常位置
- 即移動(dòng)相對(duì)定位元素，它原本所占的空間不會(huì)改變
- 相對(duì)定位元素經(jīng)常被用來作為定位元素的容器塊
- ```
h2.pos_left
{
    position:relative;
    left:-20px;
    background-color:red;
}

h2.pos_right
{
    position:relative;
    left:20px;
    background-color:blue;
}
```
fixed定位
- 元素的位置是相對(duì)于瀏覽器窗口是固定位置
- 與文檔流無關(guān)，因此不占據(jù)空間
- fixed定位的元素和其他元素重疊
- ```
div.fixed{
    position: fixed;
    border: 3px solid #73AD21;
    right:20px;
    bottom:20px;
    top:20px;
}
```
  注意看代碼的樣式設(shè)置，fixed相對(duì)于top，與botton同時(shí)設(shè)置的話，div會(huì)被撐開
absolute定位
- 絕對(duì)定位的元素相對(duì)于最近的已定位元素，如果元素沒有已定位的父元素，那么他的位置相對(duì)于<html>
- 與文檔流無關(guān)，不占據(jù)空間
- absolute定位的元素和其他元素重疊
sticky定位
- 粘貼定位
- 基于用戶的滾動(dòng)位置來定位
- 依賴于用戶的滾動(dòng)，在position：relative與position：fixed定位之間切換
- 在頁面滾動(dòng)目標(biāo)區(qū)域內(nèi)它的行為類似于relative，超出目標(biāo)區(qū)域則像fixed，固定在目標(biāo)位置
- 指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：頭號(hào)碼甲 > 《待分類》

舉報(bào)/認(rèn)領(lǐng)