CSS 상대 위치
상대 위치를 설정한 요소의 상자는 특정 거리를 이동합니다. 요소는 위치 전의 모양을 유지하며, 원래로 차지했던 공간은 여전히 유지됩니다.
CSS 상대 위치
상대 위치는 매우 쉽게 이해할 수 있는 개념입니다. 요소에 상대 위치를 설정하면, 그 요소는 그 자리에 나타납니다. 그런 다음, 수직이나 수평 위치를 설정하여 이 요소가 시작점에 대해 '상대적으로' 이동할 수 있습니다.
top을 20px로 설정하면, 상자는 원래 위치의 상단 아래 20픽셀의 곳에 위치합니다. left를 30픽셀로 설정하면, 요소 왼쪽에 30픽셀의 공간을 만들어, 요소를 오른쪽으로 이동합니다.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
아래 그림과 같이:
주의할 점은 상대 위치를 사용할 때, 이동 여부에 관계없이 요소는 여전히 원래의 공간을 차지합니다. 따라서 요소를 이동시키면 다른 상자를 덮을 수 있습니다.
CSS 상대 위치 예제
- 위치: 상대 위치
- 이 예제는 요소의 정상적인 위치에 대한 상대 위치를 보여줍니다.
