CSS 위치 속성에 대한 자세한 설명

화면에 요소를 배치할 때 알아야 하는 두 가지 중요한 유형의 속성이 있습니다. 첫 번째 위치:는 요소에 사용할 위치 지정 방법의 유형(예: 정적, 상대, 절대 또는 고정)을 지정합니다.

두 번째는 요소의 오프셋을 지정하는 데 사용되는 속성 집합(top:, bottom:, right:, left:)입니다. 위, 아래, 오른쪽 및 왼쪽은 사용된 포지셔닝 방법에 따라 다르게 계산되며 position: static에서는 무시됩니다.

CSS의 position 속성은 요소가 페이지에 배치되는 방식을 정의합니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 배치된 요소의 최종 위치를 결정합니다.

정적 포지셔닝

정적 배치 요소는 항상 페이지의 정상적인 흐름에 따라 배치됩니다. HTML 요소는 기본적으로 정적으로 배치됩니다. 정적으로 배치된 요소는 top, bottom, left, right 및 z-index 속성의 영향을 받지 않습니다. 아래 예에서 녹색 상자 "B"는 정적 위치를 가집니다.

.static {
  position: static;
  /* This is often not needed since HTML elements have a static position by default */
}

상대적 포지셔닝

위, 오른쪽, 아래, 왼쪽을 사용하여 자신을 기준으로 위치를 지정할 수 있다는 점을 제외하면 정적 위치 지정과 유사하게 작동합니다.

상대 위치 지정은 기본 정적 위치 지정이 있는 경우 요소가 도착했을 위치를 기준으로 이동하도록 요소에 지시합니다. 요소에 상대 위치 지정을 지정하고 위쪽이 40px라고 지정하면 그렇지 않은 위치에서 40px 아래로 이동합니다.

.relative {
  position: relative;
  top: 40px;
  left: 30px;
}

위의 CSS는 아래와 같이 Box-B의 위치를 ​​변경합니다.

절대 위치

절대 위치 지정은 브라우저에 위치 지정 중인 요소가 문서의 정상적인 흐름에서 제거되어야 하며 위쪽, 아래쪽, 왼쪽 및 오른쪽에 지정된 값을 기준으로 페이지의 정확한 위치에 배치됨을 알려줍니다. HTML에서 앞이나 뒤의 요소가 웹 페이지에 배치되는 방식에는 영향을 미치지 않습니다.

절대 요소는 기본적으로 정적 위치가 아닌 가장 가까운 부모의 왼쪽 상단으로 향합니다.

.absolute {
  position: absolute;
  top: 10px;
  right: 0px;
}

고정 위치

고정 요소는 전체 HTML 요소를 기준으로 배치됩니다.

고정 위치 지정은 절대 위치 지정과 유사하지만 고정 위치 지정은 요소를 브라우저 창에 고정합니다. 위아래로 스크롤하면 다른 요소가 지나쳐도 고정 요소가 제자리에 있습니다.

.fixed {
  position: fixed;
  top: 20px;
  right: 30px;
}

끈끈한 포지셔닝

고정 위치는 상대 위치와 고정 위치를 하나로 결합한 것입니다. 상대적으로 시작하지만 페이지 밖으로 스크롤하면 고정된 위치가 됩니다.

참고: Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다(아래 예 참조). 고정 배치가 작동하려면 위쪽, 오른쪽, 아래쪽 또는 왼쪽 중 하나 이상을 지정해야 합니다.

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 20px;
  right: 30px;
}

다음은 Sticky를 포함한 다른 위치를 포함하는 코드펜입니다. 아래로 스크롤하여 작동 중인 고정 위치를 확인합니다.



그게 다야, 다음 주에 보자!