※ 화면에 고정되는 "position : fixed" 는 클릭하면 사라지게 해두었습니다.
- position 은 요소의 위치하는 방법을 지정합니다.
약간 어려운 개념이기도 합니다만(?) 이해 하고 나면 그렇게 어렵지 않습니다.
모든 요소들은 각자 자기의 위치에서 지정된 크기 만큼의 영역을 차지하고 있습니다.
position 은 이 요소들의 위치를 특별하게(?) 바꾸어 줄 수 있습니다.
위 예제는 회색 div 안에 파란색 div 를 넣고 속성을 지정한 후 어떻게 표시되는지 보이도록 만들었습니다.
absolute 는 회색을 뚫고 나왔으며 fixed 는 뚫고 나오기도 했지만 스크롤해도 위치가 고정됩니다. (따라다니죠)
그럼 간단히 살펴보고 다음 예제로 봅시다 ^^
- position : static 기본값 입니다. 아래 3개의 속성으로 지정하지 않는다면 요소들의 기본값 입니다.
- position : relative 상대위치값. 차지하는 영역을 그대로 유지하고 위치를 이동할 수 있습니다.
- position : absolute 차지하는 영역없이 위치를 지정할 수 있습니다.
- position : fixed 차지하는 영역없이 화면 스크롤에 영향을 받지않고 위치를 지정할 수 있습니다.