---
tags: css
---

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

### position: absolute; (絕對定位)

* 當我們用一個box 想將它定位到 網頁的任何地方是只需要加 上position: absolute; 並做位置設定即可

.box{
width: 100px;
height: 100px;
background: #000;
/* 設定位置 */
position: absolute;
left: 0;
bottom: 0;
}

> 若我們建立一個header包住box中，絕對定位的div還是會超出header的範圍

<!-- HTML -->
 <div class="header">
        <div class="box"></div>
    </div>

/* css  */
.box{
    width: 100px;
    height: 100px;
    background: #000;
    /* 設定絕對定位 */
    position: absolute;
    right: 0;
    top: 0;
}

.header{
    width: 300px;
    height: 150px;
    border: 1px solid red;
}

> 結果還是超出


### position: relative; (相對定位)

* 在使用相對定位後

.header{
    width: 300px;
    height: 150px;
    border: 1px solid red;
      /*   設定絕對定位   */
    position: relative;
}

> 絕對定位 就會尋找父元素相對位置

### z-index 圖層疊層位置

* 當div與div互相疊起時可使用z-index: 來決定最上層，數值越大越在上面

### position: fixed; 固定位置

* 常用到鎖定左下或促銷滾動網頁時固定位置上