요소 위치 지정

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