html - 滚动时修复标题位置

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

Fiddle is here

您需要使用 css 做更多的工作才能获得这种效果，背景只是为了在 fiddle 中可见而添加的。你的 body 需要一个可以清除固定标题的边距，如下面的 .body 类所示

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

.body {
    margin-top: 70px;
}