使用CSS在标题内设置搜索框样式

Question

我正在尝试使用CSS在标题内设置搜索框的样式。这是我的问题图片，以帮助尝试使事情更清晰：

当搜索框可见时：

所以我的主要问题是，当使用JQuery搜索框消失时，它会从文档流中删除，因为我在position: absolute;上使用.topSearchBarResultWrapper来获取我想要的搜索框头。我尝试使用position: relative;确实将元素.topSearchBarResultWrapper重新引入流程，但不会在标题下方显示搜索结果。

因此，当我使用位置相对时，我确实尝试使用top: 80px;将搜索框包装器向下移动，然后使用margin-top: -100px;去掉上面的额外空白区域，但是当你添加时将搜索结果搜索到包装器top: 80px;无效且不再有效，因为.topSearchBarResultWrapper的大小已更改。

我也帮助了一个JsFiddle：https://jsfiddle.net/jjzp07ey/

这是我正在使用的HTML代码：

<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>

这是我正在使用的CSS代码：

.topSearchBarInput
{
    height: 32px;
    width: 300px;
    vertical-align: middle;
    border: none;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.topSearchBarButton img
{
    height: 24px;
    width: 24px;
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

.topSearchBarResultWrapper
{
    display: inline-block;
    height: auto;
    background-color: #dad9d5;
    border-radius: 4px;
    padding-bottom: 5px;
    position: absolute;
}

.topSearchBarResult
{
    background-color: red;
    width: 300px;
    height: auto;
}

header
{
    background-color: black;
}

header ul
{
    height: auto;
    padding: 15px 0px;
    margin: 0px;
}

header li
{
    display: inline;
}

.defaultBlueButton /* Default Button Style */
{
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); /* Used to support many different browsers */
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border: 0px;
}

.defaultBlueButton:hover
{
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); /* Used to support many different browsers */
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
    border: 0px;
    cursor: pointer;
}