HTML / CSS帮助我无法定位搜索框

Question

由于某种原因，每次我尝试移动搜索框时，搜索框都将紧贴在徽标下方。 这是我的代码

.searchbox{
    position: absolute;
    top:50px;
    right: 50px;
}

还有我的HTML

    <div class="headerMenu">
            <div id="wrapper"">
                <div class="logo">
                    <img src="./img/logo.png" />
                        <div class="seachbox">
                        <p style="margin-right: 1px;"></p>
                            <form action="search.php" methond="GET" id="search" >
                                    <input type ="text" name="q" size"60" placeholder="Find Surfers...">

我的徽标CSS没有位置：相对

.logo{
    width: 125px;
}
.logo img{
    width: 150px;
height: 38px;
padding-top: 5px;
}

Answer 1

这可能是因为.logo position: relative; 。 从.logo div中扔掉搜索框。 那不是徽标的一部分，对吗？

做这样的事情

 header{ width: 100%; height: 70px; background-color: #eee; position: relative; padding: 25px 0; } header #logo{ width: 150px; height: 60px; background-color: orange; line-height: 60px; } header #searchbox{ position: absolute; top: 50px; right: 50px; } 

 <header> <div id="logo">Logo</div> <input type="text" id="searchbox" value="Search..."> </header>