* 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>

*자바스크립트 function을 태그에 직접 넣지 않고 싶을 때

document.getElementById("mb_id").onblur = function() { overlabel(this); }
document.getElementById("mb_password").onblur = function() { overlabel(this); }

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

---

※ 로그인 하시면 원본파일을 볼 수 있습니다. ※