HTML 절대위치를 상대위치로 잡기(?) position: relative와 absolute
페이지 정보
본문
position: absolute를 사용하면 문서전체를 기준으로해서 위치를 잡습니다.
즉, absolute 라는 뜻답게 절대적인 위치입니다!
반면에,
position: relative를 사용하면 기존에 자리를 잡던 위치를 기준으로해서 위치를 잡습니다.
즉, relative 라는 뜻답게 상대적인 위치입니다!
그런데, 가끔 상대적이면서 절대적인(?)것이 필요할때가 있습니다.
한번 아래의 코드를 보세요!
HTML:
<div id="wrap">
<div id="inner">
<!-- .. -->
</div>
</div>
CSS:
#wrap { position: relative; }
#inner { position: absolute; top: 100px; left: 80px; }
이런 경우에, #inner가 문서전체를 절대적인 기준으로 해서 위치를 잡을까요?
아닙니다!
문서 전체가 아니라 #wrap를 기준으로 해서 위치를 잡습니다!
즉, 상위 객체가 relative이고 하위 객체가 absolute 라면, 상위객체의 위치를 기준으로 합니다!
이거 굉장히 유용한 경우가 많습니다.
absolute와 relative가 만나면 상대적으로 절대적인 위치를 잡는다는게 너무 편리하죠~
자료출처
http://qnrdlqkrwhdgns.canxan.com/jpboard/post/238
즉, absolute 라는 뜻답게 절대적인 위치입니다!
반면에,
position: relative를 사용하면 기존에 자리를 잡던 위치를 기준으로해서 위치를 잡습니다.
즉, relative 라는 뜻답게 상대적인 위치입니다!
그런데, 가끔 상대적이면서 절대적인(?)것이 필요할때가 있습니다.
한번 아래의 코드를 보세요!
HTML:
<div id="wrap">
<div id="inner">
<!-- .. -->
</div>
</div>
CSS:
#wrap { position: relative; }
#inner { position: absolute; top: 100px; left: 80px; }
이런 경우에, #inner가 문서전체를 절대적인 기준으로 해서 위치를 잡을까요?
아닙니다!
문서 전체가 아니라 #wrap를 기준으로 해서 위치를 잡습니다!
즉, 상위 객체가 relative이고 하위 객체가 absolute 라면, 상위객체의 위치를 기준으로 합니다!
이거 굉장히 유용한 경우가 많습니다.
absolute와 relative가 만나면 상대적으로 절대적인 위치를 잡는다는게 너무 편리하죠~
자료출처
http://qnrdlqkrwhdgns.canxan.com/jpboard/post/238
댓글목록
등록된 댓글이 없습니다.