이번 포스팅은 태그 요소의 위치를 설정하는 속성에 대한 이야기를 해보겠습니다.
앞서 박스모델에서 태그요소간에 상호작용에 의해서 위치가 결정된다고 했습니다.
맞긴 하지만 지금까지는 태그 요소를 위치하는 방법 중에 한가지만 살펴본 것입니다.
위치를 결정하는 속성은 position인데 이 속성을 지금까지 설정하지는 않았습니다. position 속성을 주지 않으면 디폴트로 static이라는 속성값이 부여됩니다. 그러면 지금까지 static 속성값으로 위치를 정한 것이 되네요.
position 속성
position 속성이 가질 수 있는 속성값에는 다음과 같은 4가지가 있습니다.
static : position 속성을 부여하지 않았을 때 가지는 디폴트 값.
relative : 현재 위치에서 상대적인 offset 속성을 줄 수 있다.
absolute : 부모 중에 static이 아닌 요소의 위치를 기준으로 상대적인 offset 속성을 줄 수 있다. 하지만 현재 위치가 변하는 것은 아니다.
※ relative와 absolute의 공통점은 offset 속성을 가질 수 있다는 것이지만 absolute의 경우는 offset 속성의 기준이 되는 위치가 조건에 따라서 달라질 수 있다는 점을 기억하자. 이 속성의 이름이 absolute라서 혼동될 수 있다.
fixed : 브라우저에 대해서 위치를 잡는다. 스크롤에 영향을 받지 않고 고정된 위치를 가짐.
offset 속성
기준이 되는 곳으로부터 얼마만큼 떨어졌는지를 정한다. top, right, bottom, left
예를들어 top : 10px; 는 기준이 되는 곳(top)으로 부터 아래로 10px 만큼 떨어진 곳을 의미한다.
- static
static은 position 속성을 주지 않을 때의 디폴드 값입니다. 위 코드는 3개의 div 태그 요소의 position 값이 static입니다. 이 예를 변형하면서 나머지 속성값들에 대해서 설명하겠습니다.
- relative
두 번째 태그요소의 position을 relative로 변경하고 아래로 10px 오른쪽으로 10px 만큼 offset을 주었습니다. 이 때 다른 태그요소들은 변함이 없습니다. 왜냐면 position이 static이기 때문입니다.
물론 third를 second의 자식으로 만들면 다음과 같이 되겠죠. border를 얇게 줘서 잘 안보이는데 second의 파란 테두리가 third까지 감싸고 있습니다. 부모요소가 움직이면 자식요소도 그만큼 움직입니다. 혼동하지 마세요.
- absolute
이번에는 두 번째 태그요소(second)의 position을 absolute로만 바꿔보겠습니다. 이 때 offset 속성은 주지 않겠습니다.
이 결과는 무엇을 뜻할까요? 혼란스러울 수도 있겠는데 알고보면 간단합니다. absolute 속성을 주는 순간 이 태그요소는 다른 태그 요소들과 다른 층으로 옮겨 갔다고 이해하면 됩니다. 3차원 좌표계라면 z축이 변경되었고 이로 인해서 남은 빈 공간에 third가 채워져 들어간거죠. 이 때 (x, y) 의 위치는 변하지 않은 것에 주목하시기 바랍니다.
이번에는 offset 값을 줘보겠습니다. 0, 0을 줘보죠.
자 원점이 브라우져에 맞춰졌네요. 여기서 한가지 짚고 넘어가야할 것이 있습니다.
현재 id가 second인 태그 요소는 부모 태그가 없습니다. 이런 경우는 브라우저의 좌 상단의 좌표가 0, 0이 됩니다.
하지만 부모태그가 있는 경우는 다음 조건에 따라서 달라집니다.
① 부모의 position 속성의 값이 모두 static이라면 브라우저의 좌 상단의 좌표가 0, 0이 된다.
② 부모의 position 속성의 값 중에 static이 아닌 값이 있다면 해당 부모의 위치가 0, 0이 된다.
뭐이리 복잡하나 생각될 겁니다. 복잡한 것 같지만 부모가 있을 때, 그리고 부모가 static이 아닐 때 외에는 브라우저의 좌상단이 0,0이 되므로 어렵지 않게 외울 수 있습니다.
예) second의 부모가 first고 first의 position이 relative일 때
second를 first의 자식으로 만들고 second의 offset을 0, 0으로 했습니다. 이 때 first의 position이 relative인 것을 기억하세요.
만약 first의 position이 static이라면 결과는 다음과 같겠죠.
- fixed
fixed 역시 absolute처럼 z축 속성이 변합니다. 브라우저 내의 중력이 위쪽으로 작용한다고 생각해보세요. first와 second와 third는 위치 속성값이 static일 때는 서로 맞물려 있습니다. 이 상태에서 second에 absolute속성값을 주어 공중으로 띄었다고 생각하면 third가 중력에 의해서 위쪽 빈 공간으로 이동할 겁니다. 여기까지는 앞에서 이미 실습했죠.
fixed 역시 똑같은 현상이 일어납니다.
그렇다면 absolute 속성과 어떤 차이점이 있는지 알아야겠죠.
fixed는 absolute와 달리 무조건 브라우저의 좌표를 따릅니다. 게다가 스크롤도 무시하므로 브라우저에 고정되어 보입니다.
fixed 속성값을 주어 second를 z축 방향으로 올리니 third가 자리를 매꿉니다. 이 때 second의 border 테두리가 내용에 맞게 변경된 것에 주목하세요. 이 현상은 absolute의 경우도 동일하게 일어납니다.
이 상태에서 브라우저에 스크롤 바가 생기도록 창의 크기를 줄여본 후에 스크롤을 해보겠습니다.
fixed 속성값을 가지고 있는 second는 브라우저에 고정되어 스크롤을 해도 움직이지 않습니다.
- 마진 겹침 현상과 absolute, fixed
absolute 또는 fixed 속성값을 가지는 요소에 마진(margin)값을 줄 때는 주의하길 바랍니다.
요소들 사이의 거리는 마진겹침 현상에의해서 10px이 됩니다.
그럼 second의 position 속성을 absolute 또는 fixed로 바꿔보겠습니다.
margin이 없을 때는 몰랐는데 margin이 있을 때는 second가 좀 어긋나는 듯 보입니다. 이 결과에서 first와 second의 간격이 20px 입니다. 마진겹침 현상이 없어지고 서로의 margin이 다 적용되었군요. 물론 이 두 요소가 현재 서로의 위치에 영향을 주는 것은 아니지만 position 속성이 absolute나 fixed로 바뀐 요소는 위쪽에 있는 요소와 마진겹침 현상이 없어진 위치로 위치됩니다.
사실 position 속성을 absolute나 fixed로 변경할 경우는 offset 속성을 정하기 때문에 위 현상을 깊게 이해할 필요는 없습니다. 혹시 왜 이런지 궁금하신 분들을 위해서 언급했을 뿐입니다.