html css position 속성

 

 

position
    - 요소를 화면에서 내가 원하는 위치에 배치할 수 있음.
    - 포토샵의 레이어개념과 같은 z-index 사용할 수 있음

    0) static (기본값)
        : Block, inline의 흐름대로 배치...
    1) relative
        : 공중부양함
        : 자신의 자리를 절대로 다른요소에게 내어주지 않음.
        : 자기자신이 기준
        : left, right, top, bottom 기준좌표를 이용해서 요소가 이동
        : 기준좌표는 이동시에만 작성 생략가능한 값.

    2) absolute
        : 공중부양함
        : 자신의 자리를 다음요소에게 내어줌
        : 기준요소
            1) 상위요소에 position이 있는 경우 
                    : 해당요소가 기준
             자식 > 부모 > 할아버지 > 증조

            자식(absolute) -->
            가장 가까운 상위요소의 position을 기준으로 이동

            상위요소 기준을 설정 : position:relative

            2) 상위요소에 position이 없는경우 (거의 없음)
                    : body
        : left, right, top, bottom을 이용하여 이동가능 또는 생략가능

    3) fixed
    4) sticky   ---> 



    포지션 적용시 z-index(레이어) 순서

    1) z-index를 적용하지 않은경우
        마크업 순서대로 위로 배치됨.