디자인관리 > 고급 디자인 관리 > 메인 화면 디자인

 

안에서 중간에 <금주BEST상품>부분에서 해드이미지를 가지고 있는 <div> 위치를 아래 <td>안으로 이동시킵니다.

 

 

 

 

그리고~ <td> 의 <style> 속성안에 'position: relative;'라는 속성을 추가하고,

 

안에 <div>의 <style>속성안에 ' top:0px; left:-1px; '로 변경하고 추가합니다. 그러면

 

현제 처럼 크롬에서도 잘 나옵니다~!!!

 

 

 

 

 

'absolute'를 줬는데, 이것은 공간을 지정해 주지않으면 윈도우 전체를 생각하고 XY좌표값을 생각하게 됩니다.

 

그래서 <td>처럼 크기가 지정이 되어 있는 (table에 width에 992px에 먹혀 있으니 td도 992px사이즈 인셈이죠,)

 

상태에서 'absolute'를 품고 있다면 'relative'를 주게되면 'absolute'가 <td>안에서만 놀게되고, <td>기준으로 좌표값 XY 초기화가 되죠,

 

그래서! 크롬은과 IE간의 문제는 'position'의 위치 관계에서 달라서 생긴 문제이기에 CSS줄때는 이렇게 혹시 모를 오류를 위해 위치 관계 / 크기관계를 정확하게

 

정의하고 넘어가야 브라우저간 차이가 조금은 덜합니다.

 

감사합니다.