[css] position의 다양한 속성 알아보기

 

css 속성 중 하나인 position과 z-index에 대하여 알아보겠습니다.

 

Position

position은 지정된 태그의 위치를 임의로 띄워 조정하는 태그입니다. top, bottom, left, right 을 추가로 입력하여 요소의 상대적인 위치를 지정할 수 있습니다. 이때 top, bottom, left, right로 입력된 수치는 해당 방향으로 그만큼 떨어지게 되는 것을 의미합니다. 에를 들어 top: 20px; left:20px; 은 해당 요소를 위로부터 20px, 왼쪽으로부터 20px 떨어트려 놓으라는 의미가 됩니다.

static

 position의 가장 기본적인 상태입니다. 사용자가 임의로 position 속성을 변경하지 않는다면 태그는 자동으로 position : static의 상태를 가집니다. 때문에 평범한 상태의 태그에 일부러 position: static을 입력한다 하더라도 요소에 변화는 일어나지 않습니다.

relative

podision: relative를 적용하면 앞서 설명한 바와 같이 top, left 등의 속성으로 요소를 이동할 수 있게 됩니다. 이때, 이동하게 되는 기준점은 요소가 '원래 있어야 할 위치'입니다. 즉 position: static의 상태일 때 자연스럽게 존재해야 하는 기본 위치에서 입력된 값만큼 위나 아래, 좌우로 밀게 되는 것입니다. 

 

See the Pen position relative by solip000 (@solip000) on CodePen.

위 예시를 보면 position: relative가 top: 10px; left: 20px;에 따라 원래 존재해야 할 자리를 위에서  10px만큼, 왼쪽에서 20px만큼 이탈한 것을 확인할 수 있습니다. 이처럼 relative는 자신이 원래 있어야 할 자리를 기준으로 이동합니다.

 

동시에 relative는  다른 position 속성인 absolute의 이동 기준점이 되기도 합니다. 이에 대해서는 아래 position absolute의 설명해서 자세하게 기술하겠습니다.

absolute

position: absolute는 앞서 설명한 relative보다 좀 더 복잡한 성격을 가지고 있습니다. position: absolute는 자신의 조상 태그 중 가장 가까운 position: staic이 아닌 태그를 기준점으로 움직입니다. 대게는 position: relative를 가지는 부모 태그 안에서 사용하는 것이 보편적입니다. 

 

See the Pen position absolute by solip000 (@solip000) on CodePen.

위 예시를 보면 absolute는 해당 태그가 static의 상태일 때 있어야 되는 위치가 아닌 position: relative 되어있는 부모 태그를 기준으로 자신의 위치를 정하는 것을 확인할 수 있습니다. 한 가지 주의해야 할 점은 앞서 말했듯이 absolute는 조상 태그 중 자신과 가장 가까우며 position: static이 아닌 태그를 기준으로 움직이기 때문에 부모 태그의 position 변경을 잊어버리고 자식 태그에 absolute를 준 경우 예상치 못한 방향으로 태그가 이동할 수 있습니다.

 

주의! absolute는 보통 relative를 기준으로 하도록 부모 자식 태그로 지정하여 사용하지만 부모가 relativr가 아닌 static을 제외한 다른 position 속성에도 그 태그를 기준으로 움직입니다. 간단한 예시를 보여드리겠습니다.

 

See the Pen absolute 안에 absolute by solip000 (@solip000) on CodePen.

fixed

position: fiexd는 조상 태그가 아닌 우리에게 보이는 화면, 브라우저를 기준으로 위치를 지정할 수 있도록 하는 속성입니다. 웹사이트를 사용하면서 스크롤을 하는데도 따라오는 광고 베너나 팝업, 상단으로 올라가기 버튼 등을 보신적이 있을 것입니다. 이러한 요소들이 대체로 position: fiexd를 사용하여 만들어집니다. 

 

See the Pen fixed by solip000 (@solip000) on CodePen.

위의 간단한 예시를 보면, 화면 내에서 스크롤을 움직여도 fixed 된 태그는 위치가 고정되어 움직이지 않는 것을 볼 수 있습니다.

 

.

.

오늘은 position의 자주 쓰이는 4가지 속성에 대하여 알아보았습니다. 다음 포스팅에서는 가장 최근에 만들어졌고 사용하기 까다로운 position: sticky와 position 속성을 사용할 때 주의해야 할 z-index에 관하여 이야기해 보겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다^^