CSS 기초 - 1 (position)

Position 종류

1. relative(top, right, bottom, left) = px에 따른 상대적 위치
2. absolute = 상위 태그 중 static하지 않은 것을 기준으로 px 설정
3. fixed = 스크롤을 내려도 고정시킴
4. sticky = 스크롤을 다 내릴 시 그때부터 고정시킴
5. z-index(번외) = 숫자가 낮을수록 우선순위로 보여줌

absolute

static하지 않은 것을 기준으로함. static한 객체가 없으므로 제일 상위태그인 body를 기준으로 10px만큼 설정이다.

하지만, 만약 하위 태그인 section에 relative를 설정한다면 section에 기준을 두게 된다.

section {
        background-color: blueviolet;
        position: relative;
}
div.ab {
        position: absolute;
        background-color: red;
        top: 10px;
      }

z-index

z-index=number로 설정가능하며 우선순위를 설정한다. 아래 그림은 absolute가 fixed를 가리고 있지만 z-index를 설정할 경우 fixed를 앞으로 꺼내올 수 있다.

div.fix {
        position: relative;
        z-index: 1;
      }

또한 z-index는 relative, fix, absolute에서만 동작함