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

Question

我正在使用切换功能。我遇到一个问题，当我点击按钮时，我的按钮和文本字段显示在文本上方。 的 EXPLAIN 我在按钮点击时使用了切换功能。

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

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

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

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

Answer 1

将position的{​​{1}}属性更改为wrapper，如下所示，它应该有效。 （注意：我也更改了relative值。）

top

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

进行定位

Demo

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