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를 적용한 후 브라우저에서 확인을 하면 아래와 같이 된다.

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;}

브라우저에서 확인을 하면

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

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

IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기

검색을 하다가 알아낸(http://www.cssplay.co.uk/layouts/fixed.html) 방법인데, 아주 간단합니다.

body{
height:100%;
overflow-y:auto;
}

/* Fixed 할 Element */
.fixed_div{
position:absolute;
}

하면 됩니다. ㅎㅎ

[js]현재 스크롤 위치 알아내기

var getNowScroll = function(){

var de = document.documentElement;
var b = document.body;
var now = {};

now.X = document.all ? (!de.scrollLeft ? b.scrollLeft : de.scrollLeft) : (window.pageXOffset ? window.pageXOffset : window.scrollX);
now.Y = document.all ? (!de.scrollTop ? b.scrollTop : de.scrollTop) : (window.pageYOffset ? window.pageYOffset : window.scrollY);

return now;

}

소스는 어렵지 않아서 별다른 설명이 필요 없을 것 같네요.
IE7, FF2 에서 테스트 해보았으며,
사용법은 간단합니다

<input type=”button” onclick=”CurrentScroll()” value=”지금 스크롤 위치를 알려줘”>

<script type=”text/javascript”>
var CurrentScroll = function(){

nowScroll = getNowScroll();
alert(nowScroll.X + “,” + nowScroll.Y);

}
</script>

http://jdsharp.us/ 에 스크롤 위치구하는 코드가 잘 짜여져 있어, 이 코드를 사용하였습니다.