* CSS :
.class{ margin: 5px 9px; position: absolute; }
#input:focus { position: relative; }
* Script
function overlabel(id) {
    if(id.value != "") {
       id.style.position = "relative";
    }
    else {
       id.style.position = "";
    }
}
* Apply
<label for="id" class="class">라벨</label>
<input type="text" id="input" onblur="overlabel(this);" />

* 실 적용 예제 *
<style type="text/css">
<!--
#outlogin .formlabel { margin: 5px 9px; position: absolute; }
#outlogin input:focus { position: relative; } /* 체크박스 걱정은 안하셔도 됩니다. */
-->
</style>
<div id="outlogin">
<label for="mb_id" class="formlabel">아이디</label>
<input type="text" id="mb_id" onblur="overlabel(this);" />
<label for="mb_password" class="formlabel">열쇠글</label>
<input type="text" id="mb_password" onblur="overlabel(this);" />
</div>
[EOF]

*자바스크립트 function을 태그에 직접 넣지 않고 싶을 때
document.getElementById("mb_id").onblur = function() { overlabel(this); }
document.getElementById("mb_password").onblur = function() { overlabel(this); }

제가 쓰는 방법입니다. 인풋 박스가 라벨을 덮어버리는 구조입니다.
라벨의 바깥 여백은 input의 높이에 따라 조절하세요.

아래는 라벨을 한쪽으로 치우는 방법입니다. Jquery를 이용합니다.
http://sir.co.kr/bbs/tb.php/g4_tiptech/19498/a1d3a62a38d7ad4106ecb7915c383462