[css] 포지셔닝

CSS를 사용하여 HTML 요소의 위치를 조정하는 것은 ‘포지셔닝’이라고 합니다. 요소의 포지션을 조정하려면 다음과 같은 속성을 사용할 수 있습니다.

  1. position 속성: 요소의 위치 지정 방법을 설정합니다. 값으로는 static, relative, absolute, fixed, sticky가 있습니다.
  2. top, bottom, left, right 속성: 요소를 이동시킬 때 사용하며, position 속성 값에 따라 상대적 위치를 지정합니다.
  3. z-index 속성: 요소의 쌓이는 순서를 결정합니다. 값이 클수록 위에 쌓입니다.

예를 들어, 다음과 같이 CSS를 사용하여 요소의 위치를 조정할 수 있습니다.

.box {
  position: relative;
  top: 20px;
  left: 50px;
  z-index: 1;
}

위의 코드에서 .box라는 클래스를 가지는 요소는 상대적인 위치로 20px 아래, 50px 오른쪽으로 이동하며, z-index가 1인 것을 확인할 수 있습니다.

더 자세한 내용은 MDN 웹 문서 - 포지셔닝을 참고하시기 바랍니다.