position
position 속성에는 5가지 속성값이 존재한다.
static: 기본값
relative: 문서 흐름에 배치하며, 자신을 기준으로 상하좌우 위치 값에 따라 오프셋을 적용한다.
absolute: 문서 흐름에 제거 되고, 상위 요소중 position 지정 요소에 상대적으로 상하좌우 위치 값에 따라 오프셋을 적용한다.
fixed: 문서 흐름에 제거 되고, 지정된 위치에 고정 시킨다.
sticky: 문서 흐름에 배치하며, 스크롤 되는 가까운 상위 요소에 오프셋을 적용한다.
하지만 주로 사용하는 relative, absolute, fixed 이 세가지만 설명하겠다.
position이란 배치 방법을 정해 특정한 위치를 기준으로 상하좌우 위치 값을 지정해 오프셋을 적용한다.
relative
relative는 문서의 흐름에 배치된다.
이말이 무슨 말이냐 하면 초록상자는 position:relative를 가진 div박스다.
밑에 position이란 글자가 있는데 위의 자리에서 벗어 났음에도 position은 자신의 자리를 지키고 있다.
이유는 relative는 문서 흐름에 배치가 되어 이동을 해도 자신의 자리를 지키고 있다는 것이다.
또한 relative는 자신을 기준으로 위치값에 따라 오프셋을 적용한다.
absolute
absolute는 문서 흐름에서 제거 된다.
방금 relative는 문서 흐름에 배치된다 했는데 이번엔 제거가 된다고 한다.
첫번째 사진은 absolute 주지않은 상태이다.
두번째는 absolute를 준 상태인데 밑에 있던 position이란 글자가 사라졌다.
실은 사라진 것이 아니라 absolute로 인해 div박스가 문서의 흐름에서 제거되 자신의 자리가 사라져서
position 문자가 그 자리에 들어선 것이다.
div박스를 치워보면 안에 숨어 있는 것을 확인할 수 있다.
또 다른 특징은 상위 요소중 position 지정 요소에 상대적으로 상하좌우 위치 값에 따라 오프셋을 적용한다.
파란박스는 position:relative 를 가지고 있어서 회색박스가 파란박스를 기준으로 위치한다.
만약 상위 요소중 position 지정 요소가 없다면 브라우저 화면 기준으로 우치를 잡는다.
첫번째 사진은 위치값을 바꾸지 않았고 두번째는 top,left 50px씩 준 상태이다.
fixed
fixed는 문서 흐름에 제거 되고, 지정된 위치에 고정 시킨다.
밑에 화면 처럼 자신의 자리는 없고, 스크롤을 내려도 화면에 고정된 모습을 볼 수 있다.
이렇게 해서 position의 3가지 값에 대해서 알아보았다.
몇번 써보지 않은 속성이라 조금 낯설긴 했지만 자료를 찾아보면서, 블로그를 정리하면서 알았던 개념은 더 확실히 굳히는 시간이였던 것 같다.
블로그를 자주 쓰진 않아 설명을 잘 했는지는 모르겠지만 앞으로 차근차근 내가 아는 지식을 정리하고 설명하는 습관을 들여야겠다.
