• Feed
  • Explore
  • Ranking
/
/
    Css & Sass & Scss

    요소의 위치

    positionz-indexoverflow
    전
    전상욱
    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가 존재







    - 컬렉션 아티클