본문 바로가기

카테고리 없음

[CSS 레이아웃] position 프로퍼티: static, relative, absolute, fixed

CSS 포지션 프로퍼티는 문서 내에서 요소를 배치하는 유형을 설정합니다. 또한 top, bottom, left, right 프로퍼티와 함께 사용되는 것이 일반적입니다. position 프로퍼티 값으로는 static, relative, absolute, fixed 네 가지가 있으며 각각에 대해서 예제와 함께 알아보겠습니다.

 

 

static

position 프로퍼티의 기본 값입니다. 특별히 다른 값을 지정하지 않았다면 모든 요소는 기본적으로 static 값을 갖습니다. 요소들은 차례대로 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이게 됩니다.

 

See the Pen CSS position: static by hogni-seoul (@hogni-seoul) on CodePen.

 

 

relative

기본 위치인 static 상태를 기준으로 top, bottom, left, right 프로퍼티를 사용하여 위치를 이동시킬 수 있습니다.

 

아래 코드를 열어보면 div2에 다음과 같이 css 속성과 값을 줬습니다.

 

.relative {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: tomato;
}

 

때문에 div2는 기존 위치를 기준으로 위쪽(top)에서 문서 가운데 방향으로 10px, 왼쪽(left)에서 문서 가운데 방향으로 20px 이동했습니다.

 

See the Pen CSS position: relative by hogni-seoul (@hogni-seoul) on CodePen.

 

 

absolute

postion 프로퍼티의 값이 static이 아닌 가장 가까운 조상 요소를 기준으로 top, bottom, left, right 프로퍼티의 값만큼 위치를 이동시킵니다. 조건에 맞는 조상 요소를 찾을 수 없다면 body를 기준으로 합니다. 

블록 요소(block element)의 경우라도 position 프로퍼티의 값이 absolute인 경우라면 가로폭 전체 넓이를 갖지 않습니다. 즉, 인라인 요소(inline element)와 같이 콘텐츠에 맞는 가로폭을 갖습니다.

 

아래 예제를 보겠습니다. 클래스 absolute는 부모 요소는 position: relative이기 때문에, .absolute은 부모 요소의 영역을 기준으로 오른쪽(right)에서 0px, 위쪽(top)에서 문서 가운데 방향으로 40px만큼 이동한 것을 확인할 수 있습니다. 또한 .absolute은 더 이상 블록 요소가 아니게 되었습니다.

 

See the Pen CSS position: absolute by hogni-seoul (@hogni-seoul) on CodePen.

 

 

 

fixed

fixed는 브라우저의 화면 크기를 기준으로 위치를 이동시킬 수 있습니다. 따라서 스크롤을 움직여도 화면에서 사라지지 않고 같은 곳에 있습니다. position 프로퍼티의 값이 fixed인 경우 인라인 요소와 마찬가지로 콘텐츠만큼의 가로폭을 갖습니다. 만약 가로폭을 다 쓰고 싶다면 width: 100%을 주거나 left: 0, right: 0를 주면 됩니다.

 

fixed를 이용해서 스크롤을 내려도 항상 화면 상단에 고정되어 있는 박스를 만들었습니다.

 

See the Pen CSS position: fixed by hogni-seoul (@hogni-seoul) on CodePen.