标签显示CSS更改关联的文本框位置

Question

I am using Label and textbox and changing label display property on demand. Both are draggable at once so that i kept that in one div.

<div id="textbox" style="position:absolute;border:1px solid black" class="screen">
<label id="lbltext">Name</label>    
<input id="text1"  type="text" />

But if i change display property of label then associated textbox changes position. I just want to change only label position.

Can Anybody give me some pointer on this?

Jquery :

 $("#block").click(function(){
$("#lbltext").css("display", "block");
});

$("#none").click(function(){
$("#lbltext").css("display", "");
});

$("#blank").click(function(){
$("#lbltext").css("display", "none");
});

jsfiddle Demo

updated jsfiddle

Answer 1

如果您希望标签即使在隐藏时也继续占用空间，请使用visibility: hidden而不是display: none 。

Answer 2

Like LodeRunner28 said you can use "visibility", when you want to keep the space.

JQuery:

$("#block").click(function(){
$("#lbltext").css("visibility", "visible");
});

$("#blank").click(function(){
$("#lbltext").css("visibility", "hidden");
});

Updated your JSFiddle Demo