Плавающая панель поиска над меню

Question

У меня есть тема, основанная на загрузке 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

использовать абсолютное позиционирование; затем используйте значения свойств top, и 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

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