[CSS] position

position 속성

    1. static: 기본값

    2. relative : 지정위치에서 변화를 주고 싶을 때 사용.

                           값을 주면 지정 위치보다 영역 안쪽으로 이동

                           영역 밖으로 이동하기 위해서는 값을 음수로 지정해야 한다

    3. absolute : 조상 요소에서 상속을 받아와 변화를 주고 싶을 때 사용

                             ※가장 가까이 positioning 된 요소(static이 아닌 요소)에 상속※

    4. fixed : 브라우저 화면에 상속

    5. sticky : 시작은 static과 동일

                       스크롤하다가 지정 위치에 닿으면 fixed처럼 붙어버림

                       부모요소가 밖으로 벗어나지 않음

                       예시) body의 height가 1000이고 부모요소가 500일때, 자식요소는 500까지 작동하다가 사라짐

 

      *positioning : static이 아닌 다른 요소로 지정해야 함

 

* X = 기본 자리. 원래있어야 할 영역

 

relative 와 margin의 차이

    relative를 사용하면 다른 영역과 상관없이 relative가 X만 이동.

    반면에 margin은 다른 영역과 겹치면 전체적으로 이동.

 

 absolute

    넓이를 지정하지 않으면 내용물만큼의 넓이로 세팅 없다면 숨겨짐.

    X를 차지하지 않고 동일선상의 relative도 absolute를 무시

 relative

    넓이를 지정하지 않으면 부모만큼 넓이를 가짐

 fixed

    주로 움직이지 않는 헤더등에 사용.

    스크롤을 따라 움직이지 않음. 요소를 꽉 채우기 위해서 너비를 100% or inset 0.

    얘도 absolute와 마찬가지로 relative가 무시해버림

 

inset 0 : 모든 방향을 0px로 받음. absolute의 경우 부모 요소의 100%를 받아옴.

 

아래는 sticky가 움직이는 형식을 보여준다.

 overflow : 자식요소가 부모요소의 범위를 초과할 때 처리하는 값을 결정

       hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리

       scroll : 요소가 넘치지 않아도 스크롤바가 보임

       auto : 요소가 넘칠 때만 요소를 숨기고 사용자가 확인할 수 있도록 스크롤 바로 표시

 

Z-index : 앞뒤의 순서 정하기. 레이어랑 비슷. 숫자가 높을수록 앞에 배치. 숫자는 양수, 음수 모두 사용 가능. 

  예외1. 만약 숫자가 같을 경우 아래쪽 태그가 앞에 보임

  예외2. z-index가 원하는 대로 동작하지 않을 때 90% 확률로 쌓임 맥락(stacking context)이 만들어졌기 때문

    ex) header태그와 쌓임 맥락이 있는 main태그 => header가 반드시 main 태그 앞쪽으로 보임

 예외3. auto와 0의 차이는 쌓임 맥락을 만드느냐 아니냐