# 認識 CSS #7 Position

###### tags: `CSS`

## 定位特性

### 優先權問題
1. 如果兩個元素 A 跟 B ， A 有設定定位屬性時，優先權會比沒有設定定位屬性的 B 還要大
2. 如果 A 、 B ( A 在前 B 在後) 都有使用到定位的 CSS 屬性，當 B 跟 A 的內容會有重疊時，B 優先權較大會蓋過去 A 的畫面
#### 承上題2 ， 如何讓 A 蓋過去 B
使用 <font color='red'> **z-index** </font>
將 A 新增屬性 `z-index = 1 ` ( z-index 預設是0 )就可以蓋過 B 囉
## relative

定義: 相對於自己在資料中的位置去做內容的偏移，實際上自己空間跟位置並不會受影響(自己的空間內容不會消失或移動，內容移動而已)

### 範例


#### HTML & CSS

    <ul>
        <li class="item1">1</li>
        <li class="item2">2</li>
        <li class="item3">3</li>
        <li class="item4">4</li>
        <li class="item5">5</li>
        <li class="item6">6</li>
        <li class="item7">7</li>
        <li class="item8">8</li>
        <li class="item9">9</li>
        <li class="item10">10</li>
        <li class="item11">11</li>
        <li class="item12">12</li>
        <li class="item13">13</li>
        <li class="item14">14</li>
        <li class="item15">15</li>
        <li class="item16">16</li>
        <li class="item17">17</li>
        <li class="item18">18</li>
        <li class="item19">19</li>
        <li class="item20">20</li>
    </ul>

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

li {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 2rem;
}

.item15 {
  position: relative;
  top: 10px;
  left: 50px;
  background-color: pink;
  opacity: 50%;
}
/*# sourceMappingURL=position.css.map */

#### 範例講解 relative:
我們利用的 CSS 將 第 15 個區塊的位置進行了移動。
在 item15 下可以看到我們宣告了 relative 、 top 、 left 。
這邊的意思是我想要在 15 區塊原本的位置(紅色區塊)進行 top:10px 跟 left:50px 的偏移
實際上 item15 還是在原本的位置(紅色區塊)，但是內容會隨著 top 跟 left 的影響而移動

提醒:
1. 如果只單用 position 的話， item15 還是還是會在原地的
2. 如果只使用 top 跟 left 的話 ， item15 並不會被移動哦!

## absolute

### 定義: 在自己的父元素中定位 (父元素需要新增屬性 postion : relative )，並會將這個物件從資料中抽掉( relative 只有內容偏移並不會將物件跟空間抽掉)

### 使用時機:　當不需要跟其他元素一起排列的時候

### 那如果包覆自己的父元素沒有宣告 postion : relative 哩?

答案: 那他就會再往父元素的再上一層的父元素定位，如果沒有的話也是在往上一層，如果都沒有最後就會視瀏覽器畫面為父元素