點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Absolute Position 實現 Layout

Sam Xiao's Avatar 2021-03-22

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

Version

CSS 3

Top / Right

layout000

Box 方框位於右上角。

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

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

第 8 行

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

設定父層 box style：

  • width: 100px：設定 box width
  • height: 100px：設定 box height
  • position: absolute：使用 absolute 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

layout001

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

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

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

第 8 行

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

設定父層 box style：

  • width: 100px：設定 box width

  • height: 100px：設定 box height

  • position: absolute：使用 absolute position

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

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

Horizontal Center

layout002

Absolute position 亦可實現水平置中。

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

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

第 8 行

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

設定父層 box style：

  • width: 100px：設定 box width
  • height: 100px：設定 box height
  • position: absolute：使用 absolute 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

layout003

Absolute position 亦可實現垂直置中。

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

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

第 8 行

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

設定父層 box style：

  • width: 100px：設定 box width
  • height: 100px：設定 box height
  • position: absolute：使用 absolute 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

layout004

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

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

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

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  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: absolute：使用 absolute 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

layout005

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

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

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

第 8 行

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  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: absolute：使用 absolute position
  • top: 0、bottom: 0：拉出垂直滿版空間
  • left: 0、right: 50%：拉出水平左側空間
  • margin: 0 auto：動態分配左右 margin 而水平置中
  • outline: 1px solid black：為了視覺顯示方框，實務上可不使用

Horizontal 1/4 and Vertical 1/4

layout006

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

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

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

第 8 行

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

設定父層 box style：

  • width: 100px：設定 box width
  • height: 100px：設定 box height
  • position: absolute：使用 absolute 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 發揮
  • 在 layout 部分，fixed 與 absolute 完全相同

Reference

MDN, Position

# CSS