Absolute Position 初體驗 | 點燈坊

Absolute Position 與 Fixed Position 非常類似，但還是有不少特性不太一樣。

Version

CSS 3

Absolute Position

Box 使用 absolute position。

捲動 scroll bar，會發現 box 位置改變了。

<template>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dignissimos dolore ducimus ea eius enim illo
    itaque nam neque nulla officia porro quidem ratione reiciendis soluta sunt ullam veritatis voluptate!</p>
  <p>Consequuntur deleniti officiis optio pariatur rem voluptas. A ad aspernatur consequuntur deserunt dicta distinctio
    doloremque eaque et in ipsam itaque, natus neque nobis odio officiis placeat porro quod sequi vel?</p>
  <p>Adipisci, consectetur dolore maiores mollitia soluta voluptatibus? Ab amet aperiam aspernatur autem consectetur
    consequuntur cumque delectus et ex fugit harum hic modi nisi numquam optio perferendis quibusdam repellat
    repudiandae, voluptatibus.</p>
  <p>Dolorum explicabo numquam vel velit? A aperiam at excepturi facere magni non vel? Aut blanditiis enim eveniet
    necessitatibus perspiciatis quidem quod rem sunt suscipit, tempora? Et exercitationem optio quibusdam
    reiciendis.</p>
  <div class="box">
    box
  </div>
  <p>Aliquid cupiditate eum fugit pariatur, velit voluptatibus? Aliquid dicta ea, expedita fuga fugiat laborum libero
    quae quia! Aliquam ex facere iusto laboriosam nesciunt omnis quis reiciendis sed unde voluptatibus? Ipsam?</p>
  <p>Ab accusamus ad alias aperiam architecto blanditiis consectetur doloribus dolorum ducimus ea eligendi ex, illum
    impedit incidunt ipsum, iure nemo neque odio quibusdam quisquam reprehenderit saepe sed sunt voluptas
    voluptatum.</p>
  <p>Atque, earum explicabo hic illum nesciunt quibusdam repellendus similique. Asperiores beatae debitis ex
    necessitatibus repudiandae sit voluptatem, voluptatum! Ad autem beatae commodi ea id mollitia nisi non quae sed
    voluptatem.</p>
  <p>Consequatur dolorem eum exercitationem fugiat, id illum minima mollitia natus nemo nesciunt nisi obcaecati quos
    reiciendis tempora tenetur? Commodi excepturi harum ipsa maiores molestiae, quasi quia saepe sed tempore
    temporibus.</p>
  <p>Atque doloremque eaque in nemo optio placeat provident quo rerum tenetur voluptatum. Accusantium aspernatur in ipsa
    iure numquam porro quas, sequi. Animi dolor incidunt laborum, quasi quidem velit! Porro, sit.</p>
  <p>Ab accusamus aspernatur consequuntur cumque cupiditate eius esse eveniet fugit harum laudantium minima natus
    obcaecati odio placeat possimus provident quos reprehenderit repudiandae similique sunt suscipit tempora temporibus
    totam, veniam voluptatem!</p>
  <p>Distinctio ea incidunt laborum mollitia, nam qui sint suscipit tempora voluptates voluptatum? Ad aliquid architecto
    autem beatae deleniti doloribus eum explicabo ipsam nihil odit, porro praesentium quae quis rem soluta.</p>
  <p>Distinctio ea incidunt laborum mollitia, nam qui sint suscipit tempora voluptates voluptatum? Ad aliquid architecto
    autem beatae deleniti doloribus eum explicabo ipsam nihil odit, porro praesentium quae quis rem soluta.</p>
  <p>Distinctio ea incidunt laborum mollitia, nam qui sint suscipit tempora voluptates voluptatum? Ad aliquid architecto
    autem beatae deleniti doloribus eum explicabo ipsam nihil odit, porro praesentium quae quis rem soluta.</p>
  <p>Distinctio ea incidunt laborum mollitia, nam qui sint suscipit tempora voluptates voluptatum? Ad aliquid architecto
    autem beatae deleniti doloribus eum explicabo ipsam nihil odit, porro praesentium quae quis rem soluta.</p>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
}
</style>

42 行

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
}

設定 box style：

• width: 100px：設定 box width
• height: 100px：設定 box height
• background: #f00：設定背景顏色
• position: absolute：使用 absolute position

可發現 box 獨立成新的一層，且內縮成 content 寬度，這些與 fixed position 相同，一但捲動 scroll bar，box 位置就改變了，這與 fixed position 不同

在一個 page 之外的 element 使用 fixed position，捲動後仍可顯示。

<template>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dignissimos dolore ducimus ea eius enim illo
    itaque nam neque nulla officia porro quidem ratione reiciendis soluta sunt ullam veritatis voluptate!</p>
  <p>Consequuntur deleniti officiis optio pariatur rem voluptas. A ad aspernatur consequuntur deserunt dicta distinctio
    doloremque eaque et in ipsam itaque, natus neque nobis odio officiis placeat porro quod sequi vel?</p>
  <p>Adipisci, consectetur dolore maiores mollitia soluta voluptatibus? Ab amet aperiam aspernatur autem consectetur
    consequuntur cumque delectus et ex fugit harum hic modi nisi numquam optio perferendis quibusdam repellat
    repudiandae, voluptatibus.</p>
  <p>Dolorum explicabo numquam vel velit? A aperiam at excepturi facere magni non vel? Aut blanditiis enim eveniet
    necessitatibus perspiciatis quidem quod rem sunt suscipit, tempora? Et exercitationem optio quibusdam
    reiciendis.</p>
  <p>Aliquid cupiditate eum fugit pariatur, velit voluptatibus? Aliquid dicta ea, expedita fuga fugiat laborum libero
    quae quia! Aliquam ex facere iusto laboriosam nesciunt omnis quis reiciendis sed unde voluptatibus? Ipsam?</p>
  <p>Ab accusamus ad alias aperiam architecto blanditiis consectetur doloribus dolorum ducimus ea eligendi ex, illum
    impedit incidunt ipsum, iure nemo neque odio quibusdam quisquam reprehenderit saepe sed sunt voluptas
    voluptatum.</p>
  <p>Atque, earum explicabo hic illum nesciunt quibusdam repellendus similique. Asperiores beatae debitis ex
    necessitatibus repudiandae sit voluptatem, voluptatum! Ad autem beatae commodi ea id mollitia nisi non quae sed
    voluptatem.</p>
  <p>Consequatur dolorem eum exercitationem fugiat, id illum minima mollitia natus nemo nesciunt nisi obcaecati quos
    reiciendis tempora tenetur? Commodi excepturi harum ipsa maiores molestiae, quasi quia saepe sed tempore
    temporibus.</p>
  <p>Atque doloremque eaque in nemo optio placeat provident quo rerum tenetur voluptatum. Accusantium aspernatur in ipsa
    iure numquam porro quas, sequi. Animi dolor incidunt laborum, quasi quidem velit! Porro, sit.</p>
  <p>Ab accusamus aspernatur consequuntur cumque cupiditate eius esse eveniet fugit harum laudantium minima natus
    obcaecati odio placeat possimus provident quos reprehenderit repudiandae similique sunt suscipit tempora temporibus
    totam, veniam voluptatem!</p>
  <p>Distinctio ea incidunt laborum mollitia, nam qui sint suscipit tempora voluptates voluptatum? Ad aliquid architecto
    autem beatae deleniti doloribus eum explicabo ipsam nihil odit, porro praesentium quae quis rem soluta.</p>
  <div class="box">
    box
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
}
</style>

30 行

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

在 HTML 最下方使用 absolute position。

36 行

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
}

Box style 完全不變。

• position: absolute：由於會將 element 浮其來停留在原來位置，雖然 element 已經在一個 page 之外，但捲動後還是看的到，這與 fixed postion 不同

Width with Position

Box 除了浮起來之外，還可指定其 position。

<template>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dignissimos dolore ducimus ea eius enim illo
    itaque nam neque nulla officia porro quidem ratione reiciendis soluta sunt ullam veritatis voluptate!</p>
  <p>Consequuntur deleniti officiis optio pariatur rem voluptas. A ad aspernatur consequuntur deserunt dicta distinctio
    doloremque eaque et in ipsam itaque, natus neque nobis odio officiis placeat porro quod sequi vel?</p>
  <p>Adipisci, consectetur dolore maiores mollitia soluta voluptatibus? Ab amet aperiam aspernatur autem consectetur
    consequuntur cumque delectus et ex fugit harum hic modi nisi numquam optio perferendis quibusdam repellat
    repudiandae, voluptatibus.</p>
  <p>Dolorum explicabo numquam vel velit? A aperiam at excepturi facere magni non vel? Aut blanditiis enim eveniet
    necessitatibus perspiciatis quidem quod rem sunt suscipit, tempora? Et exercitationem optio quibusdam
    reiciendis.</p>
  <p>Aliquid cupiditate eum fugit pariatur, velit voluptatibus? Aliquid dicta ea, expedita fuga fugiat laborum libero
    quae quia! Aliquam ex facere iusto laboriosam nesciunt omnis quis reiciendis sed unde voluptatibus? Ipsam?</p>
  <p>Ab accusamus ad alias aperiam architecto blanditiis consectetur doloribus dolorum ducimus ea eligendi ex, illum
    impedit incidunt ipsum, iure nemo neque odio quibusdam quisquam reprehenderit saepe sed sunt voluptas
    voluptatum.</p>
  <p>Atque, earum explicabo hic illum nesciunt quibusdam repellendus similique. Asperiores beatae debitis ex
    necessitatibus repudiandae sit voluptatem, voluptatum! Ad autem beatae commodi ea id mollitia nisi non quae sed
    voluptatem.</p>
  <p>Consequatur dolorem eum exercitationem fugiat, id illum minima mollitia natus nemo nesciunt nisi obcaecati quos
    reiciendis tempora tenetur? Commodi excepturi harum ipsa maiores molestiae, quasi quia saepe sed tempore
    temporibus.</p>
  <p>Atque doloremque eaque in nemo optio placeat provident quo rerum tenetur voluptatum. Accusantium aspernatur in ipsa
    iure numquam porro quas, sequi. Animi dolor incidunt laborum, quasi quidem velit! Porro, sit.</p>
  <p>Ab accusamus aspernatur consequuntur cumque cupiditate eius esse eveniet fugit harum laudantium minima natus
    obcaecati odio placeat possimus provident quos reprehenderit repudiandae similique sunt suscipit tempora temporibus
    totam, veniam voluptatem!</p>
  <p>Distinctio ea incidunt laborum mollitia, nam qui sint suscipit tempora voluptates voluptatum? Ad aliquid architecto
    autem beatae deleniti doloribus eum explicabo ipsam nihil odit, porro praesentium quae quis rem soluta.</p>
  <div class="box">
    box
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 0;
  right: 0;
}
</style>

36 行

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 0;
  right: 0;
}

Box style 完全不變，但多了 top 與 right：

• top: 0：指定 box 上側與第一個 page 距離
• right: 0：指定 box 右側與第一個 page 距離

與 fixed position 一樣都可指定 top、bottom、left 與 right，不同的是定位在第一個 page，會隨 scroll bar 捲動而改變；但 fixed position 是定位在 browser，不會隨捲動而改變

Summary

	Fixed	Absolute
New Layer	O	O
內縮 content 寬度	O	O
定位在 browser	O	X
定位在第一個 Page	X	O
Scrollable	X	O

Conclusion

• Absolute 與 fixed 在 new layer 與內縮 content 寬度部分相同，但 top、bottom、left 與 right 定位則不太一樣，fiexed 是定位在 browser，而 absolute 是定位在第一個 page，也因此 absolute 會受 scroll bar 捲動影響

Reference

MDN, position