我有一个固定的 div，它使用 css 放置在页面上。我有另一个 div，它是动态生成的，并添加到页面中心的表单和位置中。单击文档时添加此 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 应该改变它的位置。什么是修复。谢谢
最佳答案
您实际上并没有将新创建的 DIV 居中，而是将整个表单居中，尝试做这个小改动:
$('form').append('<div id="dvfloat" class="float_div">Welcome</div>').fadeIn('slow');
$('#dvfloat').center();
关于jquery - 关于使用 css 和 jquery 定位 div 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12608033/