레이어 left,top .................................................
레이어 위치를 잡으려면 left,top 을 사용한다.
absolute에서 이 값을 사용하면 브라우저 창을 기준으로 위치를 잡기 때문에 기존 본문내용과 동 떨어져 따로 움직일 수가 있다. 특히 본문이 가운데 정렬일 경우 !!!
relative에서는 상위태그 기준이므로 상위태그내에서 항상 일정한 위치에 레이어가 놓이지만....
absolute 에서 레이어를 브라우저 기준이 아닌 항상 본문 내용의 일정한 부분에 위치시키고 싶다면 left, top 을 지정하지 않는게 좋은 방법이다!!!!! |
■ absolute 에서 본문내용의 원하는 위치에 레이어 놓기
* 아래는 같은 레이어를 3개의 칸을 가진 테이블에 넣어본 것이다.
* table태그를 잘 활용하면 본문내용과 항상 일치하는 곳에 레이어를 사용할 수 있다.
* left ,top 설정 없음! |
| <div id="Layer1" style="position:absolute; width:100px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;"></div> |
■ relative 에서는 본문내용 속에 레이어가 비집고 들어가므로 레이어 속의 내용이 그 사이에 들어와도 좋은 지를 보고 위치를 잡아야 한다.
* left,top 으로 상위태그 기준으로 위치를 줄 수 있다. |
| <div id="Layer2" style="position:relative; width:200px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;" left:0 ; top:0></div> |
| <div id="Layer2" style="position:relative; width:200px; height:80px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;" left:30 ; top:30></div> |
relative인 경우 아래 예제는 상위 태그인 td에서 left로 30, top 에서 30 떨어진 곳에 위치하게 된다.
left 값은 도움이 될 수 있지만 top 값은 내용과 이상한 배치가 일어날 수 있다. |
----------------------------------------------------------------------
후출처
-온라인 판매자들의 커뮤니티 셀클럽 http://sellclub.co.kr
-온라인 성공출발지 도매상품공급 셀프리 http://sellfree.co.kr
출처가 나와있지않은 글은 출처가 불분명하여 등록하지못하였습니다. 저작자, 글의 출처에서 수정및 삭제요청하시면 바로수정하겠습니다. 다른곳에서 글을 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.
태그&소스
매니져: 미정
패밀리 사이트 바로가기
처음
