Jquery 添加CSS时出现奇怪的效果

我有一个工作良好的网页，直到我在其周围添加了以下HTML和CSS：

HTML:

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

奇怪的效果：

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

你可以看到“奇怪的效果”发生在这里

如果单击任何包含

（c）

的div，您将注意到出现一个小下拉列表。如果随后试图通过拖动小部件的标题来移动小部件，请通过单击

（c）

在我添加上面的HTML和CSS之前，这并没有发生

屏幕截图：

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

以下是一些显示问题的屏幕截图：

这里的下拉列表看起来不错：

使用旧HTML启用下拉菜单移动小部件，下拉菜单使用小部件正确移动：

在添加新divs/css的情况下启用下拉菜单移动小部件，dropwdown在小部件中的移动不正确：

问题：

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

---

有没有一种方法可以在不丢失HTML和CSS添加到页面中的效果的情况下纠正它，而不会导致下拉菜单做奇怪的事情？

当您开始拖动

.widget

时，jQuery UI添加了一种

位置：绝对

到当拖动停止时删除的

.widget

元素。这就是导致下拉菜单跳转的原因

要固定，请添加

位置：相对

（

position:absolute；

也适用）查看

.widget

的样式，并重新评估定位算法。我建议：

$dd.css({
    top: $nav3.outerHeight()+10,
    right: 10
});

您可能还需要增加

下拉列表的
z-index


还有许多其他的优化可以完成，但这应该足以解决您的问题。
这是因为您给了一个div一个填充

相对于元素的下拉列表位置。开始拖动时，下拉列表将相对于另一个元素放置

总的来说，我发现您的HTML和CSS非常混乱，但这里有一个解决方案：

我删除了溢出：隐藏在.widget_头中，因为它的唯一目的是包含浮动元素（对吗？），而是添加了一个伪元素来清除浮动

.widget_header:after {
    content: "";
    display: table;
    clear: both;
}

此外，我从Javascript中删除了很多行。这些属性仅用于设置CSS属性（或计算值）

我不明白为什么不能相对于.widget_标题定位下拉列表（这就是我所做的）
我注意到了，但是我没有看到有或没有外部两个div的不同“奇怪效果”。你能更好地描述这些区别吗？和她一样（谷歌浏览器）。下拉列表保持打开状态，并与移动的框整齐地对齐。当您在下拉列表打开的情况下放置div时，它会出现。但可能是最简单的解决方案，在drag init中折叠下拉列表。拖动时我们不需要它，为什么要显示它？我会截图。我需要一些时间。谢谢。@Neograph734拖动时下拉列表是否绘制在不同的位置？是的，但如果没有外部两个div，情况也是如此。IE8似乎不喜欢这样，如果我单击
（c）
，下拉列表直到我将
（c）
鼠标移出后才会出现。不过，您的示例确实解决了移动问题。在IE8和Google Chrome中似乎运行良好。在我的主要项目中尝试这一点，并将很快报告。谢谢。刚刚发现了一个问题。点击小部件最上面一行的
（c）
几乎是完美的，但点击小部件最下面一行的
（c）
似乎会打开屏幕上的下拉列表。所有下拉列表的右上角都应该与相应的
（c）
s的右下角对齐。谢谢。我唯一的问题是，您的示例似乎创建了
.widgets
，其z索引高于页面上的所有其他元素。我在原始问题中发布的HTML上方还有一些其他的
。下拉列表，这些下拉列表位于这些小部件后面。即使我将小部件设置为1，将外部下拉列表设置为1000。他们仍然支持小部件。我将针对这个问题开始另一个问题。谢谢你的帮助。你可以根据需要调整所有的z指数。我只是选择了一个足够大的数字来解决这个问题。