입문자를 위한 CSS 기초강의(7)

position

---

• position은 문서 상에 요소를 배치하는 방법을 정의한다.
• position이 요소를 배치 방법을 결정하면, top,right,bottom,left가 최종 위치를 결정하는 방식이다.
• static이 기본값
  
  
  

1) relative

요소를 일반적인 문서 흐름에 따라 배치하되,상하좌우 위치 값에 따라오프셋을 적용한다.

div{ width: 100px; height: 100px;
   background-color: deeppink;
   position: relative;
   top: 100px; left: 100px; }

2) absolute

요소를 일반적인 문서 흐름에서 제거하고, 상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다.

 div{ width: 100px; height: 100px;
 background-color: deeppink;
 position: absolute;
 top: 100px; left: 100px; }.

3) fixed

요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킨다.

.pos{ width: 200px; height: 200px;
 background-color: olive;
 position: fixed;
 top: 50px; left: 50px; }

4) sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 스크롤되는 가장 가까운 상위 요소에 대해 오프셋을 적용한다.

.pos{ width: 200px; height: 200px;
 background-color: olive;
 position: sticky;
 bottom: 0px; }