添加 CSS 时出现奇怪的效果

Question

我有一个运行良好的网页，直到我在其周围添加了以下 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>

CSS：

.content
{
    background:#BBBBBB;
}

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

奇怪的效果：

你可以在这个jsfiddle中看到“奇怪的效果”。

如果您单击任何包含(c) 的 div，您会注意到出现了一个小下拉菜单。如果您随后尝试通过拖动小部件的标题来移动小部件，请注意单击 (c) 时出现的下拉列表会发生什么情况

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

截图：

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

下拉菜单在这里看起来不错： Click to enlarge.

使用旧 HTML 启用下拉菜单的移动小部件，下拉菜单与小部件一起正确移动： Click to enlarge.

在添加了新的 div/css 的情况下启用下拉菜单移动小部件，下拉菜单与小部件一起移动不正确： Click to enlarge.

问题：

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

Answer 1

当您开始拖动 .widget 时，jQuery-UI 会为 .widget 元素添加样式 position: absolute;，该样式会在拖动停止时被移除。这就是导致下拉菜单跳转位置的原因。

要解决此问题，请将 position: relative;（position: absolute; 也可以）添加到 .widget 的样式中并重新评估您的定位算法。我建议：

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

您可能还需要增加.dropdown 的z-index。

http://jsfiddle.net/mblase75/RrpGr/14/

还有许多其他优化可以做，但这应该足以解决您的问题。

Answer 2

这是因为你给了一个 div 的填充。

您的下拉菜单相对于元素的位置。当您开始拖动它时，下拉菜单相对于另一个元素的位置。

总体而言，我发现您的 HTML 和 CSS 非常混乱，但这里有一个解决方案：http://jsfiddle.net/RrpGr/3/

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

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

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

我不明白您为什么不能仅相对于 .widget_header 定位下拉菜单（我就是这样做的）？