JavaScript에서 요소의 위치 지정 방식을 설정하려면 position 속성을 사용하면 됩니다. 이 속성은 CSS의 position 속성과 동일한 값을 가지며, DOM 요소의 style 객체를 통해 동적으로 변경할 수 있습니다.
position 속성의 주요 값
- static – 기본값으로, 요소가 일반적인 문서 흐름에 따라 배치됩니다.
- relative – 요소의 원래 위치를 기준으로 상대적으로 배치됩니다.
- absolute – 가장 가까운 위치 지정 조상 요소를 기준으로 절대적으로 배치됩니다.
- fixed – 브라우저 뷰포트를 기준으로 고정됩니다.
- sticky – 스크롤 위치에 따라 relative와 fixed처럼 동작합니다.
예제
아래 코드를 실행한 후 버튼을 클릭하면, div 요소의 position 값이 relative에서 absolute로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 200px;
background-color: orange;
border: 3px solid red;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<p>position 속성을 사용해 위치 지정 방식을 설정하려면 버튼을 클릭하세요.</p>
<button type='button' onclick='display()'>위치 설정</button>
<div id='box'>
<p>이것은 div 요소입니다. 이것은 div 요소입니다. 이것은 div 요소입니다.</p>
<p>이것은 div 요소입니다. 이것은 div 요소입니다. 이것은 div 요소입니다.</p>
<p>이것은 div 요소입니다. 이것은 div 요소입니다. 이것은 div 요소입니다.</p>
</div>
<br>
<br>
<script>
function display() {
document.getElementById('box').style.position = 'absolute';
}
</script>
</body>
</html>버튼을 클릭하면 display() 함수가 호출되고, document.getElementById('box').style.position = 'absolute'; 구문에 의해 id가 box인 요소의 위치 지정 방식이 absolute로 설정됩니다. 이처럼 JavaScript의 style 객체를 활용하면 사용자 인터랙션에 따라 요소의 배치 방식을 자유롭게 제어할 수 있습니다.