태그는 부모 자식 관계가 있어요
즉 엄마 태그와 할머니태그와 나 태그가 있어요.
예를들면 이러한 것이죠.
<div id="grand">
<div id="parent">
<div id="son">
</div>
</div>
</div>
//예제를 위해 스타일을 지정함니다.
#grand{margin-top:100px; width:300px; height:300px; background-color:red;}
//마진은 위에서부터 100픽셀 여유를 두려고 하는 것이고요
//색갈은 빨강색
//크기 300x300
#parent{width:200px; height:200px; background-color:green;}
//색 녹색
//크기 200x200
#son{width:100px; height:100px; background-color:blue;}
//색 파랑
//크기 100x100
relative는 이러한 부모자식 관계에서 이용됨니다.
즉 grand의 position을 relative로 두면
parent나 son 에서 positon:absolute로 사용 해서 위치를 top:50px, left:50px 처럼 지정 했을시
grand의 좌측 상단점을 기준으로 50px 아래, 50px 우측에서 부터 시작됨니다.
#grand{position:relative; margin-top:100px; width:300px; height:300px; background-color:red;}
#parent{position:absolute; width:200px; height:200px; background-color:green; top:50px; left:50px;}
#son{width:100px; height:100px; background-color:blue;}
만약 grand에서 relative 를 없애버리면. 하위 absoulte는 기준을 브라우저로 잡는다.
그래서 브라우저에서 우측 50px 상단 50px 위치부터 시작됨니다.
#grand{margin-top:100px; width:300px; height:300px; background-color:red;}
#parent{position:absolute; width:200px; height:200px; background-color:green; top:50px; left:50px;}
#son{width:100px; height:100px; background-color:blue;}
그리고 grand에서 relative 선언 했는데 하위에 absolute가 필요한가? 싶다.
#grand{position:relative; margin-top:100px; width:300px; height:300px; background-color:red;}
#parent{width:200px; height:200px; background-color:green; top:50px; left:50px;}
#son{width:100px; height:100px; background-color:blue;}
아무 적용도 안됨니다 호갱님.
