# CSS position

## reset
因為不同瀏覽器預設的內建版面有差異性，所以利用reset的方式做版面的重置。

Normalize.css
http://necolas.github.io/normalize.css/

---
## position
決定物件以哪個空間作為參考空間

### static 靜態定位

### relative 相對定位
特性:
1. 參考自己空間做偏移，沒偏移則會停留在原來的位子
(變化優先權以資料方向做決定，無軸向無關)

li {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: gray;
  margin: 1px;

  list-style: none;
}

li:nth-child(36) {
  position: relative;
  background-color: brown;
  left: 50px; /* 與左邊間距50px */
}


2. 有定位的層級會大於沒定位的層級
3. 層級一樣情況下，由程式碼順序去堆疊
4. **z-index**可以直接調整層級

li:nth-child(36) {
  position: relative;
  background-color: brown;
  left: 50px;
}

li:nth-child(38) {
  position: relative;
  background-color: brown;
  right: 50px;
  z-index: -1;
}


### absolute
特性:
1. 尋找最近且具有定位的父層，並定位在該層padding-box上，沒偏移則會停留在原來的位子。
2. 若最後定位在視窗上，則是以視窗第一屏的畫面做定位。
3. 除了 position:static，其他定位都是可以被absolute定位到的。
4. 設定絕對定位後，物件會以自身內容寬最為大小設置。沒設置尺寸時，margin以內容寬對top,bottome,left,right去做延展，所以這個時候就無法用top bottom left right 等於0，然後margin: auto的方式做垂直置中，因為延展後沒有空間可以分配了。
:::info
垂直置中
1. 設置item寬高後
2. top bottom left right 計算出視窗外範圍
3. margin = auto 做剩餘空間分配
:::

### fixed
特性:
1. 特性跟absolute一樣，不同是fixed會將該物件固定在視窗範圍，並不會因為畫面捲動而消失

### sticky
特性:
1. sticky只能在父層當中有黏貼效果，離開父層會被捲走
2. 設置距離為多少時黏貼(top left right bottom)
3. 有z軸的問題，後面的物件會蓋住前面的

---
## border 產出三角形

border線會交會點(角落)會分成一半，利用半透明的設置可以設計出三角形的畫面。


舉例:

  border-top: 50px solid #0000;
  border-right: 50px solid #000;


:::info
小技巧1:
劃出三角形可以透過正方形畫虛線的方式保留空間，來辨別三角形的位置以及要保留的線。

小技巧2:
觀察透明線可以先找出一邊
:::

## line-height 置中
將行高設置成父層高度時，因為行高大於文字高度，所以會將剩下的空間作分配讓文字達到置中的效果。

## border-radius

border-radius: A B C D (從左上開始，順時針設置)
border-radius: AC BD (從左上開始，對角設置)
border-radius: A B C (缺的數值找對角，所以這邊D會找B)

## over-flow

若子層尺寸大於父層時要做的動作

## object-fit
設置可以防止圖片變形(寬高要設置100%)

## object-position
可以設置圖片顯示的位置