• 직선으로 이동
• 사선으로 이동
• 원형으로 이동
• 지정 경로로 이동

레이어를 움직이는 것은 DHTML의 기본적인 것이라고 말할 수 있지만, 이 만큼 눈에띄는 것은 없을것입니다. 시각적인 효과나 동적이라는 것에 가장 좋은 방법입니다.

레이어를 움직이기 위해서는 레이어의 좌표를 나타내는 property의 값을 바꿈으로 레이어를 이동할 수 있습니다. 레이어의 현재 left 좌표값이 100이라면 여기에 100을 더하거나 200을 지정해 주면 레이어가 왼쪽에서 200px로 이동합니다. 단위를 지정하지 않으면 기본으로 px가 지정됩니다.

페이지에서 왼쪽 위 꼭지점이 left=0, top=0 입니다. 레이어 내부에서는 레이어의 왼쪽 위 꼭지점이 left=0, top=0입니다.

페이지에서 레이어의 위치는 nn4는 left, top을 사용할 수 있고 ie4는 left, top, pixelLeft, pixelTop을 사용할 수 있는데, left, top과 pixelLeft, pixelTop는 조금 차이가 있습니다.

레이어가 페이지에서 left:100, top:200에 위치해 있다면 left는 "100px" top은 "200px"로 단위 px가 붙는 문자열입니다. 반면에 pixeLeft는 숫자 100이고 pixelTop은 숫자 200입니다. 그리고 이들은 모두 style object에 포함되어 있습니다. ie4에서 레이어의 top, left에 좌표 100을 지정하면 한번은 듣습니다. 하지만, 두번째는 되지 않습니다. pixelTop이나 pixelLeft는 두번째도 듣습니다.

그러므로, 레이어의 위치를 이동할 때 사용할 수 있는 형식은

	nn4는 

레이어이름.left = 100
레이어이름.top = 200

	ie4는 

레이어이름.style.left = 100 +"px"
레이어이름.style.top = 200 +"px"

	또는 

레이어이름.style.pixelLeft = 100
레이어이름.style.pixelTop = 200

D1 레이어 입니다. 마우스를 누르면 오른쪽으로 20px 만큼씩 이동합니다.

function down() {
	if(document.layers) document.D1.left+=20
	else if(document.all) document.all.D1.style.pixelLeft += 20
}
if(document.layers) { 
	document.D1.captureEvents(Event.MOUSEDOWN)
	document.D1.onmousedown=down
}
if(document.all) document.all.D1.onmousedown=down