CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기

말자 전체게시물 작성일13-05-02 05:44 조회3,683회

본문

CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기

relative는 parent element를 기준으로 상태 위치로 지정하는 방법이고
absoulte는 절대 위치로 지정하는 방법인데 이를 하게되면 child element가 아닌 절대위치를 가진 element가 되기때문에 floating과 상관없이 해당 element는 붕 떠있는 상태가 된다.
(1) parent element에는 아무값을 주지 않고 본인 스스로 relative를 줘도 되지만 이럴경우 자기 자신이 parent에 속해져 있는 상태가 되기 때문에 자신의 width 혹은 height만큼 parent element도 영향을 받게 된다.

(2) 하지만 parent element를 relative를 주고 child element를 absolute를 주게 되면 parent를 기준으로한 절대위치가 된다.

물런
간단히 예를 들어 보자
HTML 코드는 아래와 같다

<div id="parent_element">
    Parent Element
    <div id="child_element">Child Element Line number #1 <br />Child Element Line number #2 <br/>Child Element Line number #3 </div>
</div>
<div id="absolute_element">Absolute Element</div>


absolute만 사용할 경우의 CSS는 이렇다. (1번)

#parent_element {margin:50px;background:pink;}
#child_element {position:relative;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}


이 CSS를 적용한 후 브라우저에서 확인을 하면 아래와 같이 된다.

download2.gif



parent element를 relative를 주고 child element에 absolute를 줄경우의 CSS는

#parent_element {position:relative;margin:50px;background:pink;}
#child_element {position:absolute;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}


브라우저에서 확인을 하면

download.gif

와 같이 parent element 와는 독립적인 상태가 된다.


꼭 후자것이 좋은건 아니다. 상황에 따라 알맞는것을 사용하면 된다.

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 1 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 73 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 88 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 114 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 100 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 100 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 144 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 99 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 336 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 119 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 80 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 181 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1416 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1681 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1062 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4208 추천: 15
게시물 검색