Styling a search box inside a header with CSS

If you take a look at this fiddle: https://jsfiddle.net/jjzp07ey/ <header> <!-- HTML 5 header --> <ul class="navigationBarButtons"> <li> <a class="topSearchBarButton defaultBlueButton navLoginButton"><img src="images/icons/searchIcon.png"></a> <div class="topSearchBarResultWrapper"> <input type="text" class="topSearchBarInput" name="topSearchBox" placeholder="Search for someone..."> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> <div class="topSearchBarResult">d</div> </div> </li> <li> <a class="defaultBlueButton" href="profileranks.php">Profile Ranks</a> </li> <li> <a class="defaultBlueButton" href="howitworks.php">How it Works</a> </li> </ul> </header> I am trying to position the search box inline with the html list the search box is inside a header which when the search button is pressed JQuery fades in the search box in the header. This is what the page is suppose to look like, the fiddle doesn't show the images: But because I am using position absolute it takes it out of the document flow. I tried using position relative, but when using top: 150px; when adding extra search results (the red ds) the search box moves up.