[css] 포지셔닝
CSS를 사용하여 HTML 요소의 위치를 조정하는 것은 ‘포지셔닝’이라고 합니다. 요소의 포지션을 조정하려면 다음과 같은 속성을 사용할 수 있습니다.
position
속성: 요소의 위치 지정 방법을 설정합니다. 값으로는static
,relative
,absolute
,fixed
,sticky
가 있습니다.top
,bottom
,left
,right
속성: 요소를 이동시킬 때 사용하며,position
속성 값에 따라 상대적 위치를 지정합니다.z-index
속성: 요소의 쌓이는 순서를 결정합니다. 값이 클수록 위에 쌓입니다.
예를 들어, 다음과 같이 CSS를 사용하여 요소의 위치를 조정할 수 있습니다.
.box {
position: relative;
top: 20px;
left: 50px;
z-index: 1;
}
위의 코드에서 .box
라는 클래스를 가지는 요소는 상대적인 위치로 20px 아래, 50px 오른쪽으로 이동하며, z-index가 1인 것을 확인할 수 있습니다.
더 자세한 내용은 MDN 웹 문서 - 포지셔닝을 참고하시기 바랍니다.