CSS position 속성
position 속성과 top, bottom, left, right 속성을 이용하여 HTML 요소의 위치를 제어할 수 있습니다. 여기서는 각기 다른 특성이 있는 3가지 방법과 그 차이점에 대하여 명확히 기술해보겠습니다.
position : fixed ;
해당 요소를 선택자로 지정하고 position : fixed; 와 top, bottom, left, right 속성을 이용하여 위치를 지정하면 다른 요소는 스크롤에 따라 움직여도 해당 요소는 고정되어 스크롤하여도 움직이지 않습니다.
position : relative ;
해당 요소를 선택자로 지정하고 position : relative; 와 top, bottom, left, right 속성을 이용하여 위치를 지정하면, 해당 요소는 원래 위치를 기준으로 해당 값만큼 이동한다.
아래 결과물을 보면 이미지는 첫번째 단락 바로 밑이 원래 위치인데,
원래 위치를 기준으로 해서 top : 100px ; 과 left : 100px ; 만큼 이동했다. 원래 위치의 공간은 여전히 남아 있는 상태(투명한 상태)이다.
※ 그런데 top인데 아래방향으로 left인데 오른쪽방향으로 이동한다. 상식적인 생각이다. 여기서는 상식과 다르다. top을 예로 설명하면 원래 위치의 top을 기준으로 삼아 - 값을 주면 위로 이동하고 + 값을 주면 아래로 이동한다. 0값을 주면 제자리! left도 마찬가지다. 원래 위치의 left를 기준으로 - 값을 주면 왼쪽으로 이동하고 + 값을 주면 오른쪽으로 이동한다. 0값을 주면 제자리!
position : absolute ;
해당 요소를 선택자로 지정하고 position : absolute; 와 top, bottom, left, right 속성을 이용하여 위치를 지정하면, 해당 요소는 가장 상위에 있는 부모요소의 위치를 기준으로 해당 값만큼 이동한다.
가장 위에 있는 요소는 body요소이다. 이 body요소를 기준으로 이동 한다. position : relative; 와는 다르게 원래 위치의 공간은 남아 있지 않다.
※ position : relative ; 와 position : absolute ; 응용하기
한가지 꼭 알아둘 것이 있다.
1. 아래와 같이 3단 부모-자식 관계인 요소들이 있다.
2. second 요소(부모)에 position: relative를 지정하되 상하좌우 값을 주지 않고
third 요소(자식)에 position: absolute를 지정하고 top:110px 과 left:110px를 주면
third 요소(자식)는 가장 상위의 요소를 기준으로 이동하는 것이 아니라 second 요소(바로 위 부모요소)를 기준으로 이동 한다.