Include the z-index property in the styling for the #location-search element and set it to 1.
#location-search {
position: fixed;
z-index: 1;
top: 45px;
margin: 0 5px;
}
Keep in mind that the z-index property only affects sibling elements - those that share the same parent. This means if you have two non-static positioned elements within the same parent, you can use z-index to control their stacking order within the parent. However, if they have different parents, you will need to manipulate the z-index of their parent elements.
<div id="Wrapper">
<div id="Test1">blue</div>
<div id="Test2">red</div>
</div>
div { position: absolute; }
#Test1 { background: blue; z-index: 10; }
#Test2 { background: red; z-index: 9; }
/* Blue appears over red even though it's declared first */
However,
<div id="Wrapper">
<div id="InnerWrapper">
<div id="Test1">blue</div>
</div>
<div id="Test2">red</div>
</div>
div { position: absolute; }
#InnerWrapper { z-index: 10; }
#Test1 { background: blue; z-index: 15; }
#Test2 { background: red; z-index: 11; }
/* Red is displayed over blue because the blue's wrapper lacks a z-index or has a lower one */