<div class="static-box">이 요소는 static입니다.</div>

.static-box {
  position: static;
  border: 2px solid black;
  padding: 10px;
}

<div class="relative-box">이 요소는 relative입니다.</div>
<div>Normal flow</div>

.relative-box {
  position: relative;
  left: 20px;
  top: 20px;
  border: 2px solid red;
  padding: 10px;
}

<div class="container">
  <div class="absolute-box">이 요소는 absolute입니다.</div>
</div>

.container {
  position: relative;
  height: 100px;
  border: 2px solid black;
}
.absolute-box {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 2px solid blue;
  padding: 5px;
}

<div class="fixed-box">이 요소는 fixed입니다.</div>
<p>스크롤해도 fixed 요소는 같은 위치에 있습니다.</p>

.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
  border: 2px solid green;
  padding: 10px;
}

body {
  height: 2000px; /* 스크롤 가능하게 만들기 위함 */
}

<div class="container">
  <p>아래로 스크롤하세요.</p>
  <div class="spacer"></div>
  <div class="sticky-box">이 요소는 sticky입니다.</div>
  <div class="content">
    <p>이 콘텐츠를 지나 스크롤하면 sticky 요소가 상단에 고정됩니다.</p>
    <p>계속 스크롤 해보세요.</p>
  </div>
</div>

.container {
  height: 400px;
  overflow-y: scroll;
  border: 2px solid black;
  padding: 10px;
}

.spacer {
  height: 100px;
}

.sticky-box {
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
  margin: 10px 0;
}

.content {
  height: 600px;
  padding: 10px;
  background-color: #f0f0f0;
}