div layer 위치 Javascript
| 레이어 left,top ................................................. 레이어 위치를 잡으려면 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 값은 내용과 이상한 배치가 일어날 수 있다. |
[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]
댓글 2개
wooripet
18년 전
올.. 좋은.. 굿.. -_-;
garangnip
18년 전
잘 보고 갑니다. 처음 layer를 접하는데 큰 도움이 되었습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 230 | 20년 전 | 2089 | ||
| 229 | 20년 전 | 3148 | ||
| 228 | 20년 전 | 3340 | ||
| 227 | 20년 전 | 2417 | ||
| 226 | 20년 전 | 5497 | ||
| 225 | 20년 전 | 2537 | ||
| 224 | 20년 전 | 2981 | ||
| 223 | 20년 전 | 4212 | ||
| 222 | 20년 전 | 2612 | ||
| 221 | 20년 전 | 2302 | ||
| 220 | 20년 전 | 3690 | ||
| 219 | 20년 전 | 2083 | ||
| 218 | 20년 전 | 3585 | ||
| 217 | 20년 전 | 2496 | ||
| 216 | 20년 전 | 2934 | ||
| 215 | 20년 전 | 2244 | ||
| 214 | 20년 전 | 3352 | ||
| 213 | 20년 전 | 2933 | ||
| 212 | 20년 전 | 3073 | ||
| 211 | 20년 전 | 2160 | ||
| 210 | 20년 전 | 1930 | ||
| 209 | 20년 전 | 2382 | ||
| 208 | 20년 전 | 2009 | ||
| 207 | 20년 전 | 1692 | ||
| 206 | 20년 전 | 1866 | ||
| 205 | 20년 전 | 3962 | ||
| 204 | 20년 전 | 1684 | ||
| 203 | 20년 전 | 2023 | ||
| 202 | 20년 전 | 2366 | ||
| 201 | 20년 전 | 1839 | ||
| 200 | 20년 전 | 2970 | ||
| 199 | 20년 전 | 2013 | ||
| 198 | 20년 전 | 2096 | ||
| 197 | 20년 전 | 3669 | ||
| 196 | 20년 전 | 3007 | ||
| 195 | 20년 전 | 2119 | ||
| 194 | 20년 전 | 10271 | ||
| 193 | 20년 전 | 2263 | ||
| 192 | 20년 전 | 1616 | ||
| 191 | 20년 전 | 2678 | ||
| 190 | 20년 전 | 2300 | ||
| 189 | 20년 전 | 1701 | ||
| 188 | 20년 전 | 1504 | ||
| 187 | 20년 전 | 1923 | ||
| 186 | 20년 전 | 1752 | ||
| 185 | 20년 전 | 1794 | ||
| 184 | 20년 전 | 2380 | ||
| 183 | 20년 전 | 1590 | ||
| 182 | 20년 전 | 1498 | ||
| 181 | 20년 전 | 1639 | ||
| 180 | 20년 전 | 2737 | ||
| 179 | 20년 전 | 1825 | ||
| 178 | 20년 전 | 1875 | ||
| 177 | 20년 전 | 2002 | ||
| 176 | 20년 전 | 1812 | ||
| 175 | 20년 전 | 1878 | ||
| 174 | 20년 전 | 1709 | ||
| 173 | 20년 전 | 2070 | ||
| 172 | 20년 전 | 1794 | ||
| 171 | 20년 전 | 2576 | ||
| 170 | 20년 전 | 2297 | ||
| 169 | 20년 전 | 2572 | ||
| 168 | 20년 전 | 1511 | ||
| 167 | 20년 전 | 1599 | ||
| 166 | 20년 전 | 2173 | ||
| 165 | 20년 전 | 1657 | ||
| 164 | 20년 전 | 3791 | ||
| 163 | 20년 전 | 2688 | ||
| 162 | 20년 전 | 2108 | ||
| 161 | 20년 전 | 2818 | ||
| 160 | 20년 전 | 1756 | ||
| 159 | 20년 전 | 1633 | ||
| 158 | 20년 전 | 2585 | ||
| 157 | 20년 전 | 1514 | ||
| 156 | 20년 전 | 1771 | ||
| 155 | 20년 전 | 3248 | ||
| 154 | 20년 전 | 1920 | ||
| 153 | 20년 전 | 1636 | ||
| 152 | 20년 전 | 4974 | ||
| 151 | 20년 전 | 4596 | ||
| 150 | 20년 전 | 3537 | ||
| 149 | 20년 전 | 3816 | ||
| 148 | 20년 전 | 7099 | ||
| 147 | 20년 전 | 3569 | ||
| 146 | 20년 전 | 2647 | ||
| 145 | 20년 전 | 2640 | ||
| 144 | 20년 전 | 7177 | ||
| 143 | 20년 전 | 4623 | ||
| 142 | 20년 전 | 1909 | ||
| 141 | 20년 전 | 3262 | ||
| 140 | 20년 전 | 1984 | ||
| 139 | 20년 전 | 1613 | ||
| 138 | 20년 전 | 2331 | ||
| 137 | 20년 전 | 1805 | ||
| 136 | 20년 전 | 1470 | ||
| 135 | 20년 전 | 1810 | ||
| 134 | 20년 전 | 2988 | ||
| 133 | 20년 전 | 2471 | ||
| 132 | 20년 전 | 1714 | ||
| 131 | 20년 전 | 1666 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기