在菜单上浮动搜索栏

Question

我有一个基于bootstrap 2.2的主题

现在我正在定制它。

当我的菜单栏滚动到顶部时，菜单栏出现在顶部。 当您单击搜索栏时，它将展开为200px ...并在菜单栏上滑动。

现在我想要正常的菜鸟。但是当它变长时，它会跳过菜单栏而不是滑过它。

我该如何改变？

右侧搜索栏的HTML代码：

<div class="container">
<div class="row">
<div class="span12">
<nav>
<div id="megamenu">
</nav>
</div>
<div class="spy-left">
<div class="spy-right">
<div class="spyshop">
<div class="shoppingcart">
</div>
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
</form>
</div>

以下是必须更改的菜单栏的html代码：

<div class="container">
<div class="wrapper_w">
<div class="row">
<div class="span12">
<div class="menufront">
<div class="spy-left">
<nav>
<ul class="nav nav-list hidden-desktop">
<div id="megamenu">
<ul id="nav">

...                                   

<div id="menufront" class="pull-right padding-1">
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
<i class="icon-search-2 icon-large"></i>
</button>
</form>
</div> 

等等......

一块css：

#spy .form-search input.search-query:focus {
    width: 200px !important;
}
#spy .form-search input.search-query {
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.27);
    float: left;
    font-size: 12px;
    height: 24px;
    padding-left: 44px;
    transition: all 0.5s ease 0s;
    width: 49px;
}

#menufront .form-search input.search-query:focus {
    display: inline-block;
    float: left !important;
    visibility: visible !important;
    width: 140px !important;
}
#menufront .form-search input.search-query {
    width: 100px !important;
}

谁能帮帮我？

Answer 1

使用绝对定位;然后使用顶部，正确和 z-index 的属性值来获得所需的效果。

you-search-bar {
   position: absolute;
   right: 0; /* adjust as needed */
   top: -25px; /* Adjust as needed to get the number that will keep it above the menu */
   z-index: 999; /* Whatever number that keeps it above the menu */
}

注意：正如Shipow所述，父母需要有一个相对的位置值。

Answer 2

您需要将该元素的CSS中的浮点规则设置为：

float: clear

在此之后，你可能需要做一些其他的定位以使事情看起来正确，但是看到代码在行动中很难更具体。

Answer 3

你可以通过你的css中的位置：relative来移动它

#spy .form-search input.search-query:focus {
  width: 200px !important;
  position: relative;
  top: 30px;
}