style="position:absolute; top:수치; left:수치; z-index:수치;
여기에서 top:수치; left:수치; 가 절대 위치를 지정하는것 입니다.
z-index:수치 는 전번 시간에 배우셔서 알고 있으실것 입니다.
top:수치; 는 위에서 부터 지정한 수치만큼 떨어지라는 말 입니다.
left:수치; 는 좌측에서 부터 부터 지정한 수치만큼 떨어지라는 말 입니다.
이 수치는 px 단위 입니다.
그리고 테이블을 기준으로 하는것이 아니고
페이지의 좌측과 페이지 상단 으로 부터의 거리 입니다.
그러므로 게시판에서 사용할때는 그 게시판 좌측과 상단의 거리를 계산한후 레이어의 위치를 잡아야 합니다.
연습장에서는 상단과 좌측에 여백이 없지만 게시판엔 게시판의 상단과 죄측에 여백이 있으므로
연습장에서의 결과와 게시판에서의 결과는 다릅니다.
예 1
테이블에 배경 그림을 깔고 marquee를 이용 하여 글을 스크롤 시키는것 까지는 모두가 아는 사실 입니다.
여기에다 반작이는 별들을 여러개 넣어 보겠습니다.
이 그림을 배경으로 하고 이 별을 레이어로 만들어 여러개를 넣어 보죠
<table width="550" height="380" bgcolor="#000000" cellpadding="0" cellspacing="0" border="10"> <tr> <td background="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5f6d176e&token=20080311&filename=natural7.jpg"> <marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="margin:40 0 40 50;"> <span style="font:bold 12px/150%; color:white; FILTER:shadow(color=#660000, Direction=135); height:100px;"> 만나고 싶을때 언제라도 만날 수 있다면<br> 보고 싶을때 언제라도 볼 수 있다면<br> 이리도 마음 저리는 일은 없을겁니다.<br><br> 만나고 싶을때 만날 수 없기에<br> 보고 싶을때 볼 수 없기에<br> 그대는 정녕 내게 아픔입니다.<br><br> 금방이라도 내게 다가와<br> 따뜻한 손 내밀것 같은 그대여.<br> 그대는 지금 어디 있습니까.<br> 어디 있기에 이토록 더디 옵니까... <br> </span> </marquee>
<img id="layer2"src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="40" height="40"
style="position:absolute; top:80; left:50;">
<img id="layer3" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="35" height="35"
style="position:absolute; top:130; left:100;">
<img id="layer4" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="40" height="40"
style="position:absolute; top:100; left:200;">
<img id="layer5" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="20" height="20"
style="position:absolute; top:100; left:150;">
<img id="layer6" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="40" height="40"
style="position:absolute; top:200; left:70;"> <img id="layer7" src="http://mysesang.com/images/star9.gif" width="30" height="30" style="position:absolute; top:70; left:200;">
<img id="layer8" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="40" height="40"
style="position:absolute; top:160; left:300;">
<img id="layer9" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="40" height="40"
style="position:absolute; top:180; left:200;">
<img id="layer10" src="http://pds70.cafe.daum.net/attach/15/cafe/2008/03/11
/10/52/47d5e5c596778&token=20080311&filename=star9.gif" width="20" height="20"
style="position:absolute; top:110; left:250;"> </td> </tr> </table>