8. Position

position 속성

position은 HTML 요소를 배치하는 방법을 지정합니다.

 

 

position 속성 값

• static - 요소가 일반적인 흐름을 따라 배치가 되게하며, 기본값입니다.
• relative - 요소가 일반적인 흐름에 따라 배치가 되지만 static과 차이점은 요소가 자신의 위치에서 top right bottom left와 같은 지정된 속성 값 기준으로 배치된다는 점입니다.
• absolute - 요소가 일반적인 흐름을 따르지 않게합니다. static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
• fixed - 요소가 일반적인 흐름을 따르지 않게합니다. 화면의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 스크롤을 움직여도 고정된 자리를 갖게 됩니다.
• sticky - 요소가 static과 같이 일반적인 흐름에 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다. top 속성을 적용해야 스크롤 임계점에서 고정이됩니다.(left, right, bottom 사용 불가)

 

위치 속성

top left bottom right 속성은 position 속성이 배치하는 방법이라면 요소를 원하는 곳으로 위치 시키는 속성입니다. position: static; 에서는 적용되지 않습니다.

 

 

 

---

실습

<!-- HTML -->
<main>
  <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 style="height: 2000px;"></div>
</main>

/* CSS */
main {
  background-color: pink;
  width: 600px;
  margin: 0 auto;
  padding: 30px;
}

div {
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

.relative {
  position: relative;
  left: 30px;
}

.absolute {
  position: absolute;
  top: 0px;
  left: 0px;
}
/* main {
  position: relative;
} */

.fixed {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.sticky {
  position: sticky;
  top: 10px;
}