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

enter image description here

当在一个链接点击，一个小的形式出现在页面右侧。

enter image description here

问题是，当这种情况发生该行读取记录添加也移动到中间。

这些是我写的定位它们的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

如何在窗体出现时修正该行的位置？

谢谢。

来源

2012-09-22 Isuru

你可以创建一个http://jsfiddle.net/。不要使用Padding-top。确定元素没有足够的空间 –

[Here]（http://jsfiddle.net/nK0de/PJVu6/）是一个小提琴。请最大化**结果**窗口，您可以了解发生了什么。 – Isuru

酷非常感谢您的链接，即帮助:)

我创建了一个新的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; }

我也moddify你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/看到它做工精细。

来源

2012-09-22 13:21:36

如果我删除了'padding-top：300px;'并将其替换为'margin-top：10px;'，则_Record Added_行会移动到页面的顶部。请参阅我发布的小提琴作为对您以前的评论的回复，以查看HTML结构。 – Isuru

你可能只需要添加更多的parring权利，当它点击中心或将其放在你想要你的#msg的地方。 –

它在您身边工作我没有任何消息吗？ –

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

回答

相关问题