요소 위치 지정

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   : 좌단으로부터 떨어진 위치