- 마진을 사용하여 컨텐츠를 겹쳐서 출력하는것은 일반적인 코딩방식이 아닙니다.

이와 같이 작업하면 브라우저에 따라서 정상적으로 출력되지 않을 수 있습니다.

 

컨텐츠를 겹쳐서 출력할때는 position:absolute; 를 사용해서 css를 수정하여 작업하셔야 합니다.

@ position

- 항목간의 위치를 잡기 위해서 사용합니다.

absolute (절대값)를 사용할 경우 콘텐츠간의 위치를 겹칠 수 있습니다.

top, right, bottom, left 를 사용하여 위치를 설정합니다.

 

ex)

.aa {position:absolute; top:0; left:0;}

: aa 항목을 좌측 상단에 위치하도록 합니다.

 

 

@ 참고사이트 (영문)

http://www.w3schools.com/cssref/pr_class_position.asp

 

 

 

@ 수정내역

- main(ims)스킨 디자인팜 수정모드 - 2칸 레이아웃의 고급자용 소스수정 에서 다음과 같이 수정하였습니다. (기존의 -마진 삭제, 의미없는 1칸 레이아웃 삭제))

 

<style>
.layout_11483_ {clear:both; {$minWidth} {$maxWidth} margin:0 auto; position:absolute; top:0; right:0; left:0; z-index:200;}
.layout_11483_ > div {{$lMargin}}
.layout_11483_ > div:after {content:''; display:block; clear:both;}
.layout_11483_ > div > [class^=container_] {float:left; position:relative; width:100%; {$lPadding} box-sizing:border-box;}
.layout_11483_ > div > .container_1 {width:{$gWidth[0]}%;}
.layout_11483_ > div > .container_2 {width:{$gWidth[1]}%;}
[id^=div_user_list] .layout_11483_ {position:relative; top:auto; right:auto; left:auto;}

<!--@if($farm_skin_layout[layout_type] == 'RES')-->
@media (max-width:102*px){
    .layout_11483_ > div > .container_1 {{$clear[0]} width:{$mWidth[0]}%; {$tPadding[0]}}
    .layout_11483_ > div > .container_2 {{$clear[1]} width:{$mWidth[1]}%; {$tPadding[1]}}
}
<!--@end-->

@media \0screen{
    .layout_11483_ {{$ie8Width}}
}
</style>

 

 

 

- 추가설명

[id^=div_user_list] .layout_11483_ {position:relative; top:auto; right:auto; left:auto;}

디자인팜 내에서는 relative 로 동작하기 위해 위와 같이 추가하였습니다.