CSS: position의 속성 - relative, absolute, fixed
CSS...css는 어렵습니다...
마치 초등학교 시절로 돌아가 종이 접기를 하며 공간에 대해 다시금 배우는 느낌이에요..
이번에는 CSS중에서도 헷갈리는 position의 속성에 대해 알아보겠습니다.
position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. position의 기본값은 static이며, 요소를 일반적 문서 흐름에 따라 배치합니다. static일때 left right top 등은 비활성화 되기에, 아무런 영향을 미치지 않습니다.
1. relative
요소를 일반적인 흐름에 따라 배치하고, 자기 자신을 기준으로 top,right,bottom등 을 적용합니다.(원래 있어야 되는 그 자리를 기준으로) .
예를 들어,
1 2 3 4 | <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: relative; top: 20px; left: 20px; background: blue; } |
를 보시면, two id를 가진 박스가 원래 있어야 할 위치를 기준으로
위(top)에서 20px , 왼쪽(left)에서 20px 떨어져 위치한 것을 볼 수 있습니다
relative 요소는 다른 요소들에는 영향을 주지 않습니다. Two를 제외한 다른 요소들은 Two가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.
2. absolute
요소는 일반적인 문서 흐름에서 벗어나고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 부모의 position 값이 static이 아닐때, 자신의 left,right,top,bottom의 기준을 부모로 잡습니다. 만약 부모의 position 값이 static이라면, 그 위의 부모를 찾아나섭니다. 없다면 전체 문서를 기준으로 잡습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: absolute; top: 20px; left: 20px; background: blue; }아 |
앞서의 HTML과 CSS에서 position 값 만을 absolute로 바꿔주었습니다.
앞서의 예제와 다르게, 다른 요소들이 Two의 자리를 채웠습니다. absolute로 배치된 요소는 흐름에서 제거되기에, 다른 요소들은 마치 Two가 없는 것처럼 배치됩니다.
3. fixed
상자에서 완전히 벗어나 웹페이지를 기준으로 자신의 위치를 잡습니다. 따라서 스크롤를 하더라도 화면의 특정 지점에 고정되어있는 요소를 생성할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: fixed; top: 20px; right: 20px; background: blue; } body { height: 2000px; } |
앞서 예제에서 position 값을 fixed로 변경하고, 스크롤을 확인하기 위해 body에 height값을 주었습니다.
