• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

div 태그의 위치속성에서 relative와 absolute 차이

오작교 21993

1

포지션에 대한 속성에서 absolute와 relative를 보면

absolute(절대적 위치)
브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에
있다면 그 곳을 기준으로 합니다.
즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통해서
좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.


relative(상대적 위치)
객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를
기준으로 상대값을 정해 줍니다.
즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에
나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서
top, left, right, bottom을 이용해서 위치를 정할수 있습니다.


div
div태그는 문단 서식에 관한 태그입니다. 그래서 스타일을
이용해서 크기를 잡지 않는다면 기본적으로 줄바꿈이 됩니다.
즉, 라인 전체에 적용이 되는 이유입니다.


span
span태그는 서식에 관한 태그이긴 하나 문단이 아닌 한줄에 관한 서식
입니다.
그래서 span태그에 스타일로 크기를 잡아주지 않으면 태그가 쓰인곳 안에
내용까지만 적용
이 됩니다.


예를 들어


줄전체에 색상

위 경우는 라인전체에 해당(문단을 적용 하기 위해 자동으로 줄바꿈)


이글에만 색상
위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다.

공유
1
오작교 글쓴이 2008.01.09. 13:41
사용례
<div style="Z-INDEX: 1; WIDTH: 460px; HEIGHT: 600px;position:relative;left:-270px;top:-650px;"> </DIV>
<DIV style="Z-INDEX: 2; LEFT: 360px; WIDTH: 460px; POSITION: absolute; TOP: 90px; HEIGHT: 600px"></div>

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290833 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349785 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294432 +14
300
normal
오작교 23.12.10.09:32 14534 0
299 Script
normal
오작교 23.12.10.09:29 19862 0
298 CSS
normal
오작교 21.01.09.14:18 40794 0
297 HTML
normal
오작교 15.09.17.08:58 116382 0
296 HTML
normal
오작교 15.09.13.21:38 21662 0
295 HTML
normal
오작교 15.09.13.21:30 25244 0
294 HTML
normal
오작교 15.08.30.12:19 52845 0
293 Script
normal
오작교 15.05.12.14:06 21227 0
292 HTML
file
오작교 12.03.08.13:51 36000 0
291 HTML
normal
오작교 11.06.03.10:44 40821 0
290 CSS
normal
오작교 11.06.03.10:29 70723 0
289 Script
normal
오작교 11.03.22.11:19 43529 0
288 Script
normal
오작교 11.03.22.11:15 38301 0
287 Script
normal
오작교 11.03.22.11:07 37185 0
286 HTML
normal
오작교 11.01.25.10:27 36281 0
285 CSS
normal
오작교 11.01.24.10:40 35453 0
284 HTML
normal
오작교 11.01.24.10:39 37173 0
283 Script
normal
오작교 11.01.24.10:34 38182 0
282 CSS
normal
오작교 11.01.24.10:31 37822 0
281 CSS
normal
오작교 11.01.24.10:27 36284 0