CSS는 HTML 요소를 원하는 위치에 자유롭게 배치할 수 있도록 도와주는 강력한 도구입니다. 페이지 내에서 요소를 어디에든 배치할 수 있으며, position 속성을 사용해 요소가 문서 흐름상 자연스러운 위치를 기준으로 배치될지(상대 위치), 아니면 부모 요소를 기준으로 배치될지(절대 위치) 지정할 수 있습니다.
상대 위치(Relative)와 절대 위치(Absolute)의 차이
position: relative;는 요소를 원래 있어야 할 자연스러운 위치를 기준으로 이동시킵니다. 반면 position: absolute;는 가장 가까운 부모 요소(또는 조상 요소)를 기준으로 요소를 배치하며, 문서의 일반적인 흐름에서 벗어나게 됩니다.
예제
다음은 상대 위치(relative positioning)를 적용한 간단한 예제입니다.
<html>
<head>
</head>
<body>
<div style = "position:relative;left:70px;top:1px;background-color:blue;color: white;">
This div has relative positioning.
</div>
</body>
</html>위 코드에서 div 요소는 left: 70px과 top: 1px 값에 따라 원래 위치에서 오른쪽으로 70픽셀, 아래로 1픽셀 이동합니다. 파란색 배경과 흰색 글자가 적용되어 이동된 결과를 시각적으로 쉽게 확인할 수 있습니다.