---
# System prepended metadata

title: DAY11 - 使用絕對定位 / 相對定位 設計版型
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇']

---

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

### position - 定位

- 例如下圖這個 box，如果要控制它在 body 的任何位置上
  我們究竟要如何去控制它呢?
  
  ![](https://i.imgur.com/9tStX4G.png)

### absolute / 絕對定位:

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

![](https://i.imgur.com/L9fWkgb.png)

- 絕對定位 / 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;
}
```

![](https://i.imgur.com/bLRwXIc.png)


### 相對定位的意義:

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

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

![](https://i.imgur.com/DgmolMI.png)

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


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