[CSS 04] Position, 조상요소

CSS Position
    요소의 위치를 결정하는 방식을 설정

1. 정적(static) 위치 지정방식
    기본값
    HTML 요소의 위치를 결정하는 기본적인 방식
    top, left, right, bottom 속성들을 사용할 수 없음
    단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식

2. 상대(relative) 위치 지정방식
    HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식
    기본 위치는 정적 위치 지정방식일 때 결정되는 위치를 의미

   *뷰포트
    가상의 화면
    화면 디스플레이 상의 표시 영역을 뜻한다.
    모바일 뷰포트는 상하 좌우로 스크롤을 움직이거나
    줌인, 줌아웃을 통해 뷰포트를 변경하며 사용

3. 고정(fixed) 위치 지정방식
    뷰포트를 기준으로 위치를 설정하는 방식
    웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치

4. 절대(absolute) 위치 지정방식
    뷰포트를 기준으로 위치를 설정하는 방식
    조상요소(위치가 설정된 조상요소)를 기준으로 위치를 지정할 수 있음
    조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정한다.

 위치가 설정된 조상요소
        정적 위치 지정방식을 제외한 방식(상대, 고정, 절대)으로 위치가 설정된 조상 요소를 의미

z-index
    HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 겹칠 수 있음
    겹쳐지는 요소들이 쌓이는 순서를 결정할 때 사용
    순서는 음수, 양수 모두 사용할 수 있음
    크기가 클수록 위에 위치하고, 작을수록 아래에 위치하게 된다.

float
    HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어줌
    float를 적용받은 요소들의 다음 요소들이 끌어올려짐
    float를 적용받은 요소들의 방향을 결정(left, right)
    컨텐츠 크기 만큼만 영역을 설정
    float를 적용받은 요소는 다른 요소보다 위쪽에 위치
    수평방향 정렬시 사용

clear
    float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
    float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 어려움
    clear 속성을 사용하여 이후에 등장하는 요소들이 더이상 
    float 속성에 영향을 받지 않도록 설정(left, right, both)