Files
css-examples/Writerside/topics/Positioning.md
2024-06-13 18:28:57 +09:00

1.3 KiB

위치 잡기

  • position :

    • static : 요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다.
    • relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않으므로, 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
    • absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 top, right, bottom, left의 값에 따라 배치합니다.
    • fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다.
    • sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 블록 레벨 조상을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
  • top, right, bottom, left

  • z-index