點燈坊

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

使用 Relative Position 實現 Layout

Sam Xiao's Avatar 2021-04-06

藉由 Relative Position 與 Absolute Position 搭配，也可排出很多特殊 Layout。

Version

CSS 3

Horizontal Center

layout000

CSS 水平置中。

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

<style scoped>
.box {
  position: relative;
}

.item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位

14 行

.item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • left: 50%：left 座標為 50%，此為 item 左側位置，並不算水平置中
  • transform: translateX(-50%)：將 item 左移本身 width 的 50%，此時才算真正水平置中

Horizontal Left

layout001

CSS 水平靠左。

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

<style scoped>
.box {
  position: relative;
}

.item {
  position: absolute;
  left: 0;
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位

14 行

.item {
  position: absolute;
  left: 0;
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • left: 0：設定 left 為 0，相當於水平靠左

Horizontal Right

layout002

CSS 水平靠右。

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

<style scoped>
.box {
  position: relative;
}

.item {
  position: absolute;
  right: 0;
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位

14 行

.item {
  position: absolute;
  right: 0;
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • right: 0：設定 right 為 0，相當於水平靠右

Vertical Center

layout003

CSS 垂直置中。

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

<style scoped>
.box {
  position: relative;
  height: 100vh;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
  height: 100vh;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位
  • height: 100vh：設定 height 為整個 browser 高度

水平置中時不必設定 width，因為 block 預設就是佔據一整列，但 height 預設只是 content 高度，因此要特別設定才能垂直置中

15 行

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • top: 50%：top 座標為 50%，此為 item 上側位置，並不算垂直置中
  • transform: translateY(-50%)：將 item 上移本身 height 的 50%，此時才算真正垂直置中

Vertical Top

layout004

CSS 垂直靠上。

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

<style scoped>
.box {
  position: relative;
  height: 100vh;
}

.item {
  position: absolute;
  top: 0;
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位

15 行

.item {
  position: absolute;
  top: 0;
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • top: 0：設定 top 為 0，相當於垂直靠上

Vertical Bottom

layout005

CSS 垂直靠下。

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

<style scoped>
.box {
  position: relative;
  height: 100vh;
}

.item {
  position: absolute;
  bottom: 0;
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位

15 行

.item {
  position: absolute;
  bottom: 0;
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • bottom: 0：設定 bottom 為 0，相當於垂直靠下

Horizontal / Vertical Center

layout006

CSS 水平垂直置中。

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

<style scoped>
.box {
  position: relative;
  height: 100vh;
}

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}
</style>

第 2 行

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

需使用兩層 HTML。

10 行

.box {
  position: relative;
  height: 100vh;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位
  • height: 100vh：設定 height 為整個 browser 高度

水平置中時不必設定 width，因為 block 預設就是佔據一整列，但 height 預設只是 content 高度，因此要特別設定才能垂直置中

15 行

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • left: 50%：left 座標為 50%，此為 item 左側位置，並不算水平置中
  • top: 50%：top 座標為 50%，此為 item 上側位置，並不算垂直置中
  • transform: translate(-50%)：將 item 同時上移本身 height 的 50%，左移本身 width 的 50%，此時才算真正水平垂直置中

Conclusion

  • 當使用 relative position 時，常需要兩層 HTML，外層使用 relative，內層使用 absolute
  • 當只是 right、left、top 與 bottom 時，可簡單使用 right、left、top 與 bottom 為 0 實現
  • 若要求 center 時，則必須靠 transform 與 translate() 微調之

Reference

MDN, Position

# CSS