css - 固定搜索按钮顶部栏

Question

我正在尝试使用搜索按钮、facebook 登录等制作一个固定的顶部栏...该栏很好，问题是，搜索按钮在更改分辨率时沿着页面移动，我希望它像facebook登录栏，所以如果你改变分辨率也没关系，所有的按钮都必须随着topbar移动，我该怎么办？谢谢。

.fixbar {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
height: 30px;
background-image: url(../img/fixbar.png);
background-repeat: repeat-x;
z-index: 1;
bottom: 0px;
}


#search {
position: fixed;
left: 396px;
top: 0px;
width: 100%;
height: 22px;
z-index: 2;
}

Answer 1

您需要设置 position:fixed .fixbar 类，然后您需要将 position:absolute 设置为#search id。

CSS

.fixbar {
    width: 100%;
    height:30px;
    position: fixed;
    left: 0px;
    top: 0px;
    right:0 height: 30px;
    background: red;
    z-index: 1;
}
#search {
    position: absolute;
    right:20px;
    top: 0px;
    width: 30px;
    height: 22px;
    z-index: 2;
    background:blue;

}

HTML

<div class="fixbar">
    <div id="search"></div>
</div>

在这里输出

演示

Answer 2

对不起，我不明白你的问题。让我们玩一个活生生的例子，我会试着理解，也许可以帮助你。看看：http: //jsfiddle.net/xdEUN/

<div class="wrapper">
<div class="fixbar">
<input type="search" id="search" />
</div>
</div>