前端CSS五中元素定位類型

時間 2020-06-04

標籤前端 css 五中元素定位類型欄目 CSS 简体版

原文原文鏈接

元素想經過底部、頂部、左側、右側屬性定位是必須先設定position的屬性值html

posistion屬性的五個值：static、relative、fixed、absoulte、sticky瀏覽器

relative定位
- 相對定位元素的定位是相對其正常位置
- 即移動相對定位元素，它本來所佔的空間不會改變
- 相對定位元素常常被用來做爲定位元素的容器塊
- ```
h2.pos_left
{
    position:relative;
    left:-20px;
    background-color:red;
}

h2.pos_right
{
    position:relative;
    left:20px;
    background-color:blue;
}
```
fixed定位
- 元素的位置是相對於瀏覽器窗口是固定位置
- 與文檔流無關，所以不佔據空間
- fixed定位的元素和其餘元素重疊
- ```
div.fixed{
    position: fixed;
    border: 3px solid #73AD21;
    right:20px;
    bottom:20px;
    top:20px;
}
```
  注意看代碼的樣式設置，fixed相對於top，與botton同時設置的話，div會被撐開spa
absolute定位
- 絕對定位的元素相對於最近的已定位元素，若是元素沒有已定位的父元素，那麼他的位置相對於<html> 3d
- 與文檔流無關，不佔據空間
- absolute定位的元素和其餘元素重疊
sticky定位
- 粘貼定位
- 基於用戶的滾動位置來定位
- 依賴於用戶的滾動，在position：relative與position：fixed定位之間切換
- 在頁面滾動目標區域內它的行爲相似於relative，超出目標區域則像fixed，固定在目標位置
- 指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。