滚动时修复标题位置

Question

我想修复标题，即使我向下滚动它也会在那里 我试图使用position：fixed

    <header style="margin-bottom: 1cm; position: fixed;  ">
        <div style="float:left;" align="left">Instagram User Explorer</div>
            <div align="center">
                <form name="contact" id="contact" method="get">
                Search : <input type="text" name="keyword" id="keyword"/>
                <input type="button" value="search!" name="submit" id="submit"/>
                </form>
            </div>
    </header>

但是文本字段和按钮下来我不知道为什么

我想要的是在同一行

    <header style="margin-bottom: 1cm;">
        <div style="float:left;" align="left">Instagram User Explorer</div>
            <div align="center">
                <form name="contact" id="contact" method="get">
                Search : <input type="text" name="keyword" id="keyword"/>
                <input type="button" value="search!" name="submit" id="submit"/>
                </form>
            </div>
    </header>

像这样：

怎么做？

Answer 1

<header style="margin-bottom: 1cm;">
    <div style="float:left;">Instagram User Explorer</div>
        <div style="float:right;">
            <form name="contact" id="contact" method="get">
            Search : <input type="text" name="keyword" id="keyword"/>
            <input type="button" value="search!" name="submit" id="submit"/>
            </form>
        </div>
</header>

Answer 2

Fiddle is here

你需要用css做更多的工作来获得这种效果，背景只是添加了小提琴中的可见性。你的身体需要一个可以清除固定标题的边距，如下面的.body类所示

.header {
    height: 50px; 
    position:fixed;
    width: 100%;
    background: #ddd;
    top: 0;
}

.body {
    margin-top: 70px;
}