javascript - 停止移动下方内容的 jQuery 向下滑动效果？

Question

我的页面顶部有 4 个“选项卡”，单击这些选项卡时，它们会使用 jQuery 向下滑动功能向下滑动以显示隐藏的 div。问题是我不希望 4 个静态“选项卡”受此影响。我希望他们保持原样。当显示隐藏的 div 时，我似乎找不到阻止它们向下移动的方法。

这是我的代码的 JSFiddle:https://jsfiddle.net/k6nzyrhm/

这是静态标签的 CSS:

.static {
    width: 160px;
    height: 120px;
    float: left;
    text-align: center;
    margin: 250px 35px 0 35px;
}

请有人知道一种方法来阻止底部的 4 个静态“选项卡”在显示隐藏的 div 时向下移动。谢谢。

Answer 1

在 .content 上使用 position: absolute。绝对定位的元素不会将其余内容向下推。

.content {
    height: 0px;
    width: 880px;
    margin-left: 20px;
    overflow: hidden;
    background-color: #e62d67;

    /* properties added */
    position: absolute;
    top: 240px;
}

参见 Example .