添加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之前没有发生这种情况。

截图：

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

Dropdown在这里看起来很好： Click to enlarge.

使用旧版HTML启用下拉列表移动窗口小部件，下拉列表与窗口小部件一起正确移动： Click to enlarge.

移动小部件时添加了新的div / css，下拉列表已启用，dropwdown与小部件的移动不正确： Click to enlarge.

问题：

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

Answer 1

当您开始拖动.widget时，jQuery-UI会向position: absolute;元素添加.widget样式，拖动时会删除该元素。这就是导致下降跳跃位置的原因。

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

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

您可能还需要增加z-index的{​​{1}}。

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定位下拉列表（这就是我所做的）？