[CSS] 포지셔닝 2-9

Yumin Jung·2023년 1월 26일
0

position 속성

position 속성은 요소들이 화면에 어떻게 배치될지를 지정한다.
특이사항으로는, 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있다.

static

static은 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영향을 받지 않는다.

relative

relative 값은 원래 위치를 기준으로 top~right 속성값이 적용되도록 한다.
요소의 위치는 이동하지만 요소가 차지하는 공백의 위치는 유지된다.
(의자는 그 자리에 두고 나만 움직인다. 다른 사람들의 의자도 가만히 있다.)

absolute

  1. absolute 값은 static이 아닌 첫 부모 요소(바로 앞 부모 -> [내 바로 아버지]가 static인 것은 absolute의 기준이 될 수 없다!)를 기준으로 top~right을 사용하여 위치를 조정할 수 있다.
  2. 요소는 페이지의 문서 흐름에서 벗어나, 자리를 차지하지 않게 된다. -> ex) 중간에 빠지면, 한 칸씩 순서대로 당겨져서 채워진다.

fixed

fixed는 부모 요소가 아닌 viewport를 기준으로 위치를 지정한다.
스크롤에 영향을 받지 않으므로, 다이얼로그 팝업처럼 움직이지 않는 요소들에 유용하게 사용될 수 있다.

sticky

sticky는 요소가 스크롤로 이동할 수 있는 공간을 top~right 속성으로 제한할 수 있다.
어떤 요소 안에 넣지않아야 -> 가장 바깥쪽에 두어야 간섭을 받지 않는다. padding의 값에 영향을 받는다.

z-index 속성

z-index 속성은 static이 아닌 요소들간 위아래 배치 순서를 지정한다.

auto는 0과 같으며, 같은 값의 요소들 중에는 나중에 배치된 것이 위로 올라오게 된다.

profile
문과를 정말로 존중해

0개의 댓글