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