關於使用CSS和jQuery定位div的問題

我有一個固定的div，並且使用CSS放置在頁面上。我有另一個動態生成的div，並添加到頁面中心的表單和位置。這個div在文檔上發生點擊時添加。關於使用CSS和jQuery定位div的問題

問題是當我點擊文檔動態添加到頁面上的div和位置正確，但靜態div位置正在變化。我只是不明白爲什麼會發生。 here is my code

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $(document).click(function (e) { 
       // Check for left button click 
       if (e.button == 0) { 
        $('form').append('<div id="dvfloat" class="float_div">Welcome</div>').center().fadeIn('slow'); 
       } 
      }); 

      jQuery.fn.center = function() { 
       this.css("position", "absolute"); 
       this.css("top", Math.max(0, (($(window).height() - this.outerHeight())/2) + 
               $(window).scrollTop()) + "px"); 
       this.css("left", Math.max(0, (($(window).width() - this.outerWidth())/2) + 
               $(window).scrollLeft()) + "px"); 
       return this; 
      } 
     }); 
    </script> 
<style type="text/css"> 
.login_div { 
    background-color: Yellow; 
    margin-left: 50px; 
    position: absolute; 
    width: 100px; 
} 
.float_div { 
    background-color: Green; 
    width: 100px; 
    height:50px; 
} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div id="static_dv" class="login_div"> hi how r u ? </div> 
</form> 
</body> 
</html>

請我的代碼運行看看效果。當我點擊文檔時，稱爲「static_dv」的靜態div重新定位，但是我沒有編寫任何代碼來執行此操作。我想靜態div應該改變它的位置。什麼是修復。感謝

來源

2012-09-26 Thomas

爲什麼jQuery的1.4.1 ？ – Blazemonger

你認爲這個問題是由於jQuery版本發生的嗎？ – Thomas

@Thomas，可能只是好奇你爲什麼使用這樣一箇舊版本。 – CaffGeek

你不是真正爲中心的新創建DIV，但整體形式，嘗試用這個小變化：

$('form').append('<div id="dvfloat" class="float_div">Welcome</div>').fadeIn('slow'); 
$('#dvfloat').center();

來源

2012-09-26 18:34:54 hyunkeln

你能告訴我爲什麼我的綠色div沒有出現，當我從jsfiddle運行我的腳本。這裏是網址http://jsfiddle.net/tridip/Aub2z/如果可能的話請看看並告訴我原因。謝謝 – Thomas

你的div裏面的形式，在你的js你改變了位置的形式，因此所有內容都太

改變試試這個

var div = $('<div id="dvfloat" class="float_div">Welcome</div>'); 
$('FORM').append(div) 
div.center().fadeIn('slow');

你需要設置DIV的位置，但施工中的（ $ TAG）.append（$ someTag） - 返回$ TAG，因此您將中心位置設置爲$ TAG

來源

2012-09-26 18:30:46

可以請你告訴我爲什麼我的綠色div沒有出現，當我從jsfiddle運行我的腳本。這裏是網址http://jsfiddle.net/tridip/Aub2z/如果可能的話請看看並告訴我原因。謝謝 – Thomas

您刪除了標籤「form」，如果您需要實現這種影響，您需要將此div添加到BODY標籤。併爲新的div設置位置。如果你希望兩個標籤有不同的位置，他們應該在一個級別上。但在你的情況下，你加入了形式。 FROM不具有高度：100％和寬度：100％，所以沒有新標籤的位置。添加新標籤到BODY –

請看這裏http://jsfiddle.net/abaksheyev/VFSLH/1/ –

使用此代碼您的「this」引用表單，並且您正在更改表單的位置，因此不工作。使用新的代碼，低於該引用格，而不是

$(document).ready(function() { 
    $(document).click(function(e) { 
     // Check for left button click 
     if (e.button == 0) { 
      $('form').append('<div id="dvfloat" class="float_div">Welcome</div>').center().fadeIn('slow'); 
     } 
    }); 

    jQuery.fn.center = function() { 
     this.find('.float_div').css("position", "absolute"); 
     this.find('.float_div').css("top", Math.max(0, (($(window).height() - this.find('.float_div').outerHeight())/2) + $(window).scrollTop()) + "px"); 
     this.find('.float_div').css("left", Math.max(0, (($(window).width() - this.find('.float_div').outerWidth())/2) + $(window).scrollLeft()) + "px"); 
     return this; 
    } 
});

來源

2012-09-26 18:30:47

關於使用CSS和jQuery定位div的問題

回答

相關問題