使用 Fixed Position 實現 Layout | 點燈坊

藉由 Fixed Position 與 top、bottom、left 、right 與 margin: auto 靈活運用，可以排出很多特殊 Layout。

Version

CSS 3

Top / Right

Box 方框位於右上角。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  right: 0;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  right: 0;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• position: fixed：使用 fixed position
• top: 0：設定 box 上緣與 browser 距離為 0
• right: 0：設定 box 右緣與 browser 距離為 0，因此 box 位於右上角
• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Browser 會根據 width、height、top、bottom、right 與 left 取最嚴格條件最後顯示

All Zero

top、bottom、left 與 right 的條件衝突，結果顯示在左上角。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width

• height: 100px：設定 box height

• position: fixed：使用 fixed position

• top: 0、bottom: 0、left: 0、right: 0：top、bottom、left 與 right 都同時設定為 0，因此拉出一個滿版顯示空間，但因為 width 與 height 限制，因此顯示在左上角

• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Horizontal Center

Fixed position 亦可實現水平置中。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• position: fixed：使用 fixed position
• left: 0、right: 0：要使用 margin: auto 水平置中，前提必須要有空間使其調整 margin，left: 0 於左側邊緣緊貼 browser，right: 0 於右側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 width: 100px 只能顯示部分，剩下空間可由 margin: auto 自由發揮而水平置中
• margin: auto：動態分配左右 margin 而水平置中
• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Vertical Center

Fixed position 亦可實現垂直置中。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• position: fixed：使用 fixed position
• top: 0、bottom: 0：要使用 margin: auto 垂直置中，前提必須要有空間使其調整 margin，top: 0 於上側邊緣緊貼 browser，bottom: 0 於下側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 height: 100px 只能顯示部分，剩下空間可由 margin: auto 自由發揮而垂直置中
• margin: auto：動態分配上下 margin 而垂直置中
• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Vertical / Horizontal Center

Fixed position 亦可實現水平垂直置中。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• position: fixed：使用 fixed position
• top: 0、bottom: 0、left: 0、right: 0：top、bottom、left 與 right 都同時設定為 0，因此拉出一個滿版顯示空間，但因為 width 與 height 限制，因此顯示在左上角
• margin: auto：動態分配上下左右 margin 而水平垂直置中
• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Horizontal 1/4 and Vertical Top

Box 位於水平 1/4 處且垂直靠上。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  margin: 0 auto;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  margin: 0 auto;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• position: fixed：使用 fixed position
• top: 0、bottom: 0：拉出垂直滿版空間
• left: 0、right: 50%：拉出水平左側空間
• margin: 0 auto：動態分配左右 margin 而水平置中
• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Horizontal 1/4 and Vertical 1/4

Box 位於水平 1/4 且垂直 1/4 處。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 50%;
  right: 50%;
  left: 0;
  margin: auto;
  outline: 1px solid black;
}
</style>

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 50%;
  margin: auto;
  outline: 1px solid black;
}

設定父層 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• position: fixed：使用 fixed position
• top: 0、bottom: 50%：拉出垂直 1/2 空間
• left: 0、right: 50%：拉出水平 1/2 空間
• margin: auto：動態分配上下左右 margin 而水平垂直 1/4 置中
• outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Conclusion

• top、bottom、left 與 right 除了可以定位外，還可以拉出空間讓 margin: auto 發揮

Reference

MDN, Position