<!-- 父層1 -->
<div class="parent">
  <div class="static">static</div>
  <div class="relative">relative - 我參照自己原始位置</div>
  <div class="absolute">absolute - 我參照父層的位置</div>
  <div class="fixed">fixed - 我參照視窗</div>
  <div class="sticky">sticky - 我參照父層</div>
</div>
* {
  height: 200vh;
}

.parent {
  width: 60vw;
  height: 150vh;
  border: black solid 3px;
  margin: 0 auto;
  position: relative;
}

.parent div {
  width: 10vw;
  height: 20vh;
}

.static {
  border: red solid 2px;
  color: red;
}

.relative {
  border: blue solid 2px;
  position: relative;
  left: 10vw; // 參照原先位置向右推 10vw
}

.absolute {
  border: orange solid 2px;
  position: absolute;
  right: 0;
  bottom: 10vh;
}

.fixed {
  border: green solid 2px;
  position: fixed;
  top: 0;
  left: 0;
}

.sticky {
  border: purple solid 2px;
  position: sticky;
  top: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.