Twitter
Facebook
Flickr
RSSPosition:absolute 와 relative
position 복잡스럽다
1. relative가 2개 붙었을 경우
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어2
</div>
결과는 '레이어1'은 body태그로부터 레프트 20px 탑 20px이 먹어들어간다.
'레이어2'는 '레이어1'의 초기상태 즉, 레이어1의 left와 top이 0인 바디에 붙어있는 상태를 기준으로
20px이 먹는다.
2. absolute 와 relative가 순서대로 붙었을 경우
<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어2
</div>
이경우 당연히 레이어1은 body영역을 기준으로 별도의 absolute의 값을 가지고 포지션이 정해지며,
레이어2는 부모가 body의 영역이므로 body를 기준으로 left20px top20px 포지션을 갖는다.
3. relative가 3개가 겹치게 된다면??
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어2
</div>
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어3
</div>
마찬가지다 레이어3가 어찌되는지만 보면 되는데,
역시 마찬가지로 body영역 기준으로 3개가 나란히 쌓이게 된다. 만약, top의 값을 줄이거나 하면
div의 블락속성과는 맞지 않게 레이어가 겹치게 된다.
4. relative , absolute, relative이 순서대로 쌓이게 되면??
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;">
레이어2
</div>
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어3
</div>
이건 응용인데, absolute는 어쨌든 body영역안에서 별도로 들어가게 되므로,
레이어1,3이 body영역 기준으로 맞붙어서 쌓이게 될것이다.
4. relative 안에 relative가 들어가게 되면?
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;">
레이어2
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어3
</div>
</div>
이 경우 레이어1은 body를 기준으로, 레이어2도 역시 body를 기준으로 배치가 되고,
레이어 3는 그 안에서 레이어2의 좌측상단 모서리를 기준으로 20px씩 움직이게 되는데,,,
이때!!! relative의 속성은 그 안에 내용물까지 따지기 때문에
하단으로는 20px+line-height까지 포함된다.
5. absolute 안에 absolute가 들어간다면??
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;">
레이어2
<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;">
레이어3
</div>
</div>
레이어1은 바디영역 기준, 레이어2 역시 바디영역 기준으로 적용이 되고,
레이어3는 레이어2를 기준으로 적용이 되겠다. 대신 이경우는 absolute이므로 line-height는 무시된다.
6. relative안의 absolute
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어 1
</div>
<div style="position:relative;left:20px;top:20px;width:300px;height:300px;">
레이어2
<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;">
레이어3
</div>
</div>
가장 많이 쓰이는 스타일이다. 그대로 해석하면 된다.
relative두개가 쌓이고, absolute는 레이어2안에서 적용이 되어진다.
급하게 정리하다보니 값을 안넣줘서 저대로 시험해보면 구분이 잘 안되는 문제가 발생할 것이다.
{background-color:;border:1px solid;} 등을 스타일에 넣어주면 구분이 될 것이다.
겹쳐서 안보이는 경우도 생기는데 그때는 width와 height를 바꿔주면 된다.
+추가20130706
<style>
.first{background-color:blue;width:200px;height:300px;}
.second{background-color:red;width:400px;height:300px;}
.third{background-color:yellow;width:100px;height:100px;position:absolute;left:50px;top:50px;}
.fourth{background-color:green;width:500px;height:500px;}
.fifth{background-color:purple;width:300px;height:300px;position:relative;}
</style>
<body>
<div class="first">
</div>
<div class="fifth">
</div>
<div class="fourth">
<div class="second">
<div class="third">
</div>
</div>
</div>
</body>
위와같은 경우엔 어떨까? 살펴보면 absolute는 자기의 직계 영향만 받는다. 친척의 영향을 전혀 받지 않는다.
그러므로 위와같은 상황에서 third클래스는 부모에 relative가 없기 때문에 기본적으로 body영역안에서
absolute 위치를 가지게 된다. 즉, third class는 second fourth영역 안에 있지 않고
body에서 위치를 가진다.
+추가20130708
부모가 relative고 자식이 absolute인 경우 자식은 따로 속성을 갖게되므로 자식의 속성이 부모에게 포함되지 않는다.
즉, 자식이 width값과 height값이 늘어난다고 하더라도 부모는 신경쓰지 않는다.
또한, 자식이 absolute인 경우에 left와 top의 속성이 주어지지 않으면,
부모의 내용물값에 영향을 받는다.
즉, 안에 텍스트가 있으면, 자식은 그 내용물 아래 쌓이게 된다.
written by LES
'HTML&CSS' 카테고리의 다른 글
| Javascript_window.onload (0) | 2013.07.04 |
|---|---|
| !important (0) | 2013.07.04 |
| css - color 적용법. (0) | 2013.07.03 |
| specificity 우선순위 (0) | 2013.07.03 |
| display 속성 (0) | 2013.07.03 |
back to top