当新元素出现时，HTML元素位置会发生变化

Question

我的网页最初看起来像这样。

点击链接时，页面右侧会显示一个小表单。

问题是当发生这种情况时，读取添加记录的行也会移到中间位置。

这些是我为定位它们而编写的CSS规则。

#frmAddService { float:right; padding-right:250px; padding-top:150px; }   //the form

#msg { float:right; padding-right:250px; padding-top:300px; }   //the 'Record Added' line

如何在表单出现时修复该行的位置？

谢谢。

Answer 1

感谢这个链接的帮助：）

我创建了一个新的div并在其中添加了您的表单和信息。这样，如果一个动作都移动。 我把id，formContainer。

这是CSS

#formContainer{width:350px; float:right;padding-right:250px;}
#frmAddService {position: relative; float:right;padding-top:300px;}

#msg { position:relative; float:right; padding-top:300px; }

#tasks { float:left; padding-left:40px; padding-top:100px; }​

我还修改了你的Jquery以改变#msg

的值

$(function()
{
    $("#frmAddService").hide();

    $("#add").click(function()
    {
        $("#frmAddService").fadeIn("slow");
        $("#msg").css("padding-top","0px");
        $("#msg").css("margin-top","10px");
        $("#msg").css("padding-right","100px");
        return false;
    });
});

这主要是因为你可以在http://jsfiddle.net/PJVu6/29/看到它运作正常。

​