# DAY11 - 使用絕對定位 / 相對定位 設計版型

### position - 定位

- 例如下圖這個 box，如果要控制它在 body 的任何位置上
我們究竟要如何去控制它呢?


### absolute / 絕對定位:

.box {
  position: absolute;
  left: 0;
  bottom: 0;
  //  例如，你要讓盒子移動到左下角，就這樣設定。  
} 
    


- 絕對定位 / absolute 的意思是說:
根據，父元素的定位點，進而去控制它的位置。
而畫面上的 box，父元素就只有一個 `body`
當然，也就是**圍繞在白色瀏覽器內奔跑**。

### 自由控制絕對定位，先設定『相對定位 / relative』:

- 設計父層 - header，並將小盒子放入:

<div class="header">
  <div class="box"></div>
</div>

.header {
  margin: 5px;
  width: 500px;
  height: 500px;
  border: 3px solid #000;
  
  // 父層設定相對定位:
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  
  // 絕對定位目標，設定位置:
  right: 0;
  top: 0;
}


### 相對定位的意義:

- 例如，我今日要在 header 這個區塊設定
relative / 相對定位的元素
實 box 可以透過 absolute / 絕對定位的方式來操控元素

### absolute - 可以設定-負值 (-x px):

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  right: -10px;
  top: 0;
}


[code](https://codepen.io/rrpaqjcq/pen/MWBbPOv)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇`