新元素出現時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元素位置發生變化

回答

相關問題