【发布时间】：2011-12-09 15:57:33
【问题描述】：
我对 jQuery 非常陌生，并且正在尝试使用它。我一直在尝试使用jQuery UI Datepicker。在大多数情况下，它似乎工作正常。但是，我发现 Datepicker 的定位似乎出错了，即当父正文 CSS 指定时，它出现在屏幕的右侧而不是文本输入的正下方：
body {
margin-left: auto;
margin-right: auto;
position : relative;
width : 777px;
}
但是，从正文的 CSS 中删除 width 属性，一切正常 - 日期选择器出现在文本输入字段的正下方。
body {
margin-left: auto;
margin-right: auto;
position : relative;
}
因此，添加宽度属性似乎导致日期选择器位于文本区域的右侧。我查看了 firebug 中的 CSS，发现 datepicker 采用了一些内联样式：
element.style {
left: 499.5px;
position: absolute;
top: 33px;
z-index: 1;
}
我想这是在 jQuery UI datepicker js 内部的某个地方创建的。
有人遇到过这种情况吗？如果是这样，我能做些什么（除了不指定正文宽度）以确保日期选择器出现在正确的位置？
完整的html如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Datepicker</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css"/>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
position: relative;
width: 777px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#dateEntry" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<p>Date: <input id="dateEntry" type="text"/></p>
</body>
</html>
【问题讨论】：
-
你为什么要把 position:relative 放在你的身体上？对我来说似乎很奇怪......
-
我为此创建了一个 jsfiddle，无法重现问题...
-
我希望 body 中的子元素继承相对定位（我不是 CSS 专家，你可能已经注意到了！）。虽然从 body CSS 中删除位置 :relative 也解决了这个问题。我想我会从 body CSS 中删除 position : relative 并将其放在子元素中（子元素比我的简化示例中的要多）。
-
我也无法使用 jsfiddle 重新创建它。如果您将代码保存到 html 文件然后使用浏览器打开该 html 文件，它似乎只会表现出来。就我而言，Firefox 3.6.24。
-
如果我没记错的话，我也遇到了这个问题...我通过一些 CSS 更改修复了它。我猜 datepicker 中有一个类或 id，这是一个非常常用的词。所以不要使用“datepicker”之类的类或类似的类。也许您在 CSS 中存在冲突，只是相互覆盖。
标签： css jquery-ui datepicker