html - 新元素出现时 HTML 元素位置发生变化

Question

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

单击链接时，页面右侧会出现一个小表单。

问题是当发生这种情况时，读取Record added的行也会移动到中间。

这些是我为定位它们而编写的 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/中看到的那样，这主要是它工作正常。

​