javascript - 切换类在文本上方显示 div 内容（按钮和文本字段）

Question

我正在使用切换功能。我面临一个问题，当我单击按钮时，我的按钮和文本字段显示在文本上方。 解释 我在按钮单击时使用了切换功能。

这是我的小提琴 http://jsfiddle.net/naveennsit/JpvAy/16/

如果我使用 top :145px 它工作正常。但它看起来不太好。它应该看起来像这样。如果用户单击按钮竞争下降并显示按钮和文本字段。如果用户再次单击按钮则竞争上升。

$(document).on('click', '#test', function() {

   $("#searchbar").toggle("slow");
});

Answer 1

position将您的属性更改wrapper为relative如下所示，它应该可以工作。（注意：我也更改了top值）。

#wrapper {
    position:relative; //modified this
    z-index:1;
    top:0px; //modified this
    bottom:48px;
    left:0;
    width:100%;
    height:100px;
    overflow:auto;
}

absolute 和 relative 之间的区别在于，当您具有绝对位置时，它从具有相对位置的容器中获取位置，默认情况下它是页面的主体。在这里，当您给出绝对位置时，您的元素从body ，但是当你有相对定位时，它会从当前容器#wrapper 中定位

演示

编辑：此链接解释了各种定位值之间的差异。