요소의 위치

positionz-indexoverflow
avatar
2025.04.10
·
2 min read

position

기준, 좌표 프로퍼티 (top, bottom, left, right)

  • static (Default값) : 부모 요소의 위치 기준

  • relative : 자신이 static일 때 기준에서 좌표 프로퍼티만큼 이동

  • absolute : static이 아닌 부모, 조상 요소중 가장 가까운 요소를 기준으로 좌표 프로퍼티만큼 이동.

    • absolute 선언시 block요소의 width는 content에 맞게 변환 되므로 width값을 지정해줘야함.

  • fixed : 부모요소와 관계없이 브라우저의 viewport 기준으로 좌표 프로퍼티만큼 이동.

    • 스크롤이 되어도 viewport에 고정

    • absolute와 마찬가지로 content에 맞게 width가 변환되므로 width를 지정해줘야함.

z-index

숫자가 클수록 앞으로 배치 (단, position이 static이 아닌 요소에만 적용)

overflow

  • 자식 요소가 부모 요소를 벗어날 때 처리 방법

  • 속성값 : visible, hidden, scroll, auto가 존재







- 컬렉션 아티클