position - CSS

CSS position 속성은 문서 상에 요소를 자유롭게 배치할 때 쓴다.

 

static

기본 값이다. 요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다.

 

 

relative

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 적용할 수 있다. 이때 요소의 원래 자리는 그대로 차지하고 있다.

// red는 top에서 20px 아래로 밀려나고, left는 30px 오른쪽으로 밀려난다.
.red {
  position: relative;
  top: 20px;
  left: 30px;
}

 

 

값이 모두 똑같은 경우 inset을 쓴다. 모든 방향에 대해서 20px을 적용한다.

.red {
  position: relative;
  inset: 20px;
}

 

 

absolute

가장 가까운 포지셔닝이 된 조상 요소에 대해 상대적으로 배치한다. 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록(body 태그)이 기준이 된다.

.red {
  position: relative;
}

.blue {
  position: absolute;
  right: 15px;
  bottom: 10px;
}

 

 

fixed

브라우저 화면을 기준으로 고정된 배치. 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 고정된 네이게이션바를 만들 때 유용하다.

.blue {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

 

 

 

sticky

static 처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치됩니다. 요소의 원래 자리를 차지한다.

.blue {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

 

 

z-index

앞뒤 순서(z 축)를 정할 때 쓰는 값이다. 순서기 때문에 단위 없이 쓴다(음수 값으로 우선 순위를 낮출 수 있다).

더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다. 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보입니다.

 

위치 지정 요소(position이 static 외의 다른 값인 요소)가 있어야, z-index 적용이 가능하다.

 

// blue가 앞에 보임
.red {
  position: relative;
  z-index: 1;
}

.blue {
  position: absolute;
  z-index: 2;
}