1. [CSS 속성 값] 요소의 위치 지정 (positioning)
ㅇ 웹페이지 내 요소의 위치를 지정할 때,
- 기준 위치를 { position : 값; }으로 정한 후에,
- 이로부터 { top / bottom / right / left : 값; }으로 떨어진 위치를 지정하는 방식
2. 기준 위치 지정 : { position : 값; }
ㅇ (형식) position : static, relative, absolute, fixed
- static : 기본 위치 (디폴트 무 설정과 같음)
- relative : 상대적인 기준 위치 지정
. 부모 요소에 relative 지정하고, 자식 요소에 absolute 지정하는 경우
. 만일, 부모 요소가 (position:relative) 미설정이면, 웹브라우저 창이 기준이 됨
- absolute : relative 기준으로부터 절대 위치를 갖게 함
. relative로 설정된 부모 요소를 기준으로, 상대적 절대 위치 지정
.. 처음에 위치한 박스 또는 다른 조상 요소를 기준으로 하게됨
. 즉, 부모 박스(relative) 내 자식 박스의 위치 지정(position:absolute)에 사용됨
.. 한편, 의사 요소인 경우, 그 부모 요소에 (position:absolute)을 주어야 함
. (보이는 방식) : 공간 차지 않고, 다른 요소들의 위에 고정되어 보임
.. 즉, 주변 요소의 사라짐/나타남 등의 효과를 주는 경우에도,
.. 그 절대 위치 그대로, 그 자리에 고정되어 보임
- fixed : 웹브라우저 창 (뷰포트) 기준으로 고정 위치 지정
. 화면 크기 변경,스크롤 때도 위치 고정시킬 때 사용
. 例) #fixed { position:fixed; bottom:10px; right:10px }
.. 화면 우측 하단으로부터, 10px 만큼씩 항상 떨어져 보임
3. 기준 위치로부터 떨어짐
ㅇ (형식) { top / bottom / right / left : 값; }
※ 위 position 속성에 의해 기준 위치가 정해지면,
- 이를 기준으로 하여, 속성값(픽셀 거리) 만큼, 기준선(상,하,우,좌 끝)으로부터 떨어뜨림
- top : 상단으로부터 떨어진 위치
- bottom : 하단으로부터 떨어진 위치
. 방향 : (+ : 바닥선으로부터 위로, - : 바닥선으로부터 아래로)
- right : 우단으로부터 떨어진 위치
. 방향 : (+ : 오른쪽끝선으로부터 왼쪽으로, - : 오른쪽끝선으로부터 오른쪽으로)
- left : 좌단으로부터 떨어진 위치