position은 요소가 위치하는 기준을 정합니다.
position의 5가지 속성값, static, relative, absolute, fixed, sticky에 대해 차례대로 알아보겠습니다.
: static
기본값. 원래 있어야 되는 위치에 있는 것
아무런 포지션을 지정해주지 않았을 때의 기본 속성값입니다.
: relative
relative는 상대적인 포지션을 나타냅니다.
예를들어, position: relative, top:30px라면 '원래 있어야 되는 위치'(static)에서 위로 30px만큼 간격이 생긴 위치에 배치됩니다. 즉, 아래로 30px 내려온다고도 볼 수 있습니다. 그러나 '원래 있어야 되는 위치'가 완전히 사라진 것은 아니며, 공백으로 남게 됩니다.
margin과 비슷하다고 생각하기 쉽지만, margin은 다른 요소들에도 영향을 미치는 반면(나머지 요소들도 마진에 의해 위치가 같이 변경됨) relative position은 오직 해당 요소만 나머지 요소들을 무시하고 독립적으로 움직입니다.
: absolute
가장 가까운 '포지셔닝이 된' 조상 요소를 기준으로 위치를 결정합니다.(position이 static이 아니라 다른 것으로 지정된, 가장 가까운 조상 요소)
relative 포지션과 달리 위치를 바꾸면 '원래 있어야 하는 위치'에서 자리를 차지하지 않습니다. 따라서 크기를 따로 지정해주지 않으면 아예 크기를 차지하지 않게 되기 때문에, width:100%, left, right를 지정해서 양 끝 위치를 정해주는 등 추가로 크기를 설정해주어야 그만큼의 크기를 차지할 수 있습니다.
따로 설정된 크기가 없다면, 해당 요소 안에 포함된 요소들의 크기만큼 크기를 가집니다.
:fixed
브라우저를 기준으로 함.
스크롤을 해도 자리가 지정돼서 변하지 않기 때문에 흔히 내비게이션을 만들 때 많이 쓰입니다. relative와 달리 요소가 '원래 있어야 하는 위치'에 공백으로 남아있지 않고 absolute와 마찬가지로 완전히 기존 자리에서 빠져버립니다.
그래서 내비게이션 바를 만들었을 경우 내용을 가려버리기 때문에 남은 내용들을
으로 넣어주고 margin-top을 내비게이션 높이만큼 주는 등의 후속 작업을 하는 경우가 많습니다. 크기는 absolute처럼 따로 지정해주지 않으면 안에 들어간 요소들의 크기만듬 차지합니다.
:sticky
static처럼 자리를 차지하고 있다가 지정된 위치에 닿으면 fixed처럼 변하는 속성값입니다.
static, relative처럼 원래 있어야 하는 위치에 공간을 차지합니다. 항상 부모요소에 소속되어 있어야 하기 때문에, 부모 요소가 창 밖으로 사라지면 같이 사라집니다. 해당 특성을 이용하면 여러가지 요소에 sticky를 사용해서 순차적으로 포지션이 고정되도록 만들 수 있습니다.
z-index:
여러가지 요소들의 포지션을 지정하다보면, 특정 요소들이 겹치거나 가려지는 일이 발생합니다. 이를 해결하기 위해 사용하는 스타일이 바로 z-index입니다.
z-index는 속성값으로 정수값을 받으며, 요소들 간의 앞뒤 배치 순서를 정해줍니다. z-index 값이 지정되지 않은 경우, 기본으로 0이 지정됩니다.
따라서, 예를 들어 z-index: -1은 평범한(z-index가 지정되지 않은) 요소들에 비해 뒤에 위치합니다. 반대로 z-index: 3 으로 지정하여 평범한 요소들보다 앞에 배치시킬 수 있습니다.
