레이어 관련

[회니]

아래 사이트를 클릭해 보면 아바타가 원래 왼쪽 상단으로 옴겨져 있습니다.
http://cof.kut.ac.kr/bbs/zboard.php?id=NEWS2&no=894

소스를 보면 아바타 부분이 아래처럼 되어 있거든요.
그런데 아바타가 테이블에서 벗어난 위치에 있습니다.
테이블 안에 아바타를 넣고 싶다면 어떻게 소스를 수정해야 할까요?

<table>
<tr><td valign=top align=center width=135>
<DIV style=' width:120; height:160; overflow:hidden;border:1'>
<DIV ID=Layer1 STYLE='position:absolute; left:0; top:0; z-index:1'><img id=ImgChar1 src=./charimg/h_m_01.gif border=0></DIV>
<DIV ID=Layer2 STYLE='position:absolute; left:0; top:0; z-index:3'><img id=ImgChar2 src=./charimg/c_m_01.gif border=0></DIV>
<DIV ID=Layer3 STYLE='position:absolute; left:0; top:0; z-index:2'><img id=ImgChar3 src=./charimg/l_m_01.gif border=0></DIV>
<DIV ID=Layer4 STYLE='position:absolute; left:0; top:0; z-index:5'><img id=ImgChar4 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer5 STYLE='position:absolute; left:0; top:0; z-index:4'><img id=ImgChar5 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer6 STYLE='position:absolute; left:0; top:0; z-index:6'><img id=ImgChar6 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer7 STYLE='position:absolute; left:0; top:0; z-index:7'><img id=ImgChar7 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer8 STYLE='position:absolute; left:0; top:0; z-index:8'><img id=ImgChar8 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer9 STYLE='position:absolute; left:0; top:0; z-index:0'><img id=ImgChar9 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer10 STYLE='position:absolute; left:0; top:0; z-index:0'><img id=ImgChar10 src=./charimg/img_blank.gif border=0 width=120 height=160></DIV>
</DIV><br>
</td></tr>
</table>

[nytereider]

position:absolute => position:relative

[회니]

의외로 간단한 해결 방법이 있었습니다.

원래 소스

Code: Select all

<DIV style=' width:120; height:160; overflow:hidden;border:1'>

수정안 소스

Code: Select all

<DIV style='position:relative;width:120; height:160; overflow:hidden;border:1'>

다른부분은 수정할 필요 없이, 위 부분만 수정하면 되더군요.
아무튼 nytereider님 감사드립니다.
웹마스터한테 빨리 수정하라고 해야 겠군요.

불여우에서는 position을 생략하면 absolute로 인식하는데 반하여,
IE에서는 position을 생략하면 relative로 인식되는군요.

[맥맨이야]

여기에 대해 두 가지 질문이 있습니다.

맥의 Safari도 같은 문제가 발생합니다. Position이 명시되어 있지 않을 경우, 표준안에 규정된 디폴트 값이 있나요? (있다면 어느 쪽이 표준을 지키고 있는 건가요?)

간혹 포털이나 신문사에 들어가면 플래시 광고가 엉뚱한 자리를 차지할

[hyeonseok]

element 의 position 값은 특별히 명시 되어 있지 않은 한..

static

입니다.

위치가 전혀 엉뚱하다면 position 문제일 가능성이 있지만...

safari 문제는...default 값에 의해서 포지셔닝이 바뀌는 것이 아닌 것 같습니다.

relative block 안에 absolute block 이 있아면 absolute block 의 origin 은 relative block의 좌상단이 됩니다. 위의 코드와 같은경우 absolute block 의 상위에 relative block 이 없기 때문에 origin 이 화면의 좌상단이 된 것입니다.

IE 에서 왜 제대로 보이는지는 잘 모르겠고, 별로 알 필요도 없는 것 같습니다.
IE 에서 position 을 표준과 같이 사용하시려면 block 에 height 나 width 의 값이 지정이 되어 있어야 합니다. 잘 알려진 IE 의 block model 버그중의 하나 입니다.

[빛알갱이]

여기에 대해 두 가지 질문이 있습니다.

맥의 Safari도 같은 문제가 발생합니다. Position이 명시되어 있지 않을 경우, 표준안에 규정된 디폴트 값이 있나요? (있다면 어느 쪽이 표준을 지키고 있는 건가요?)

간혹 포털이나 신문사에 들어가면 플래시 광고가 엉뚱한 자리를 차지할 ㅤㄸㅒㅤ가 있는데, 위의 경우와 같은 이유일까요?

position: absolute의 해석을 MS IE가 표준에 어긋나게 하고 있는 것이 문제입니다. safari와 mozilla가 표준을 제대로 지키고 있습니다.