css - 固定搜索按钮顶部栏

Question

我正在尝试制作一个带有搜索按钮、Facebook 登录等的固定顶部栏...栏很好，问题是，搜索按钮在更改分辨率时会沿着页面移动，我希望它像 facebook 登录栏一样固定，所以不管你是否更改分辨率，所有按钮都必须移动顶部栏，我该怎么办？谢谢。

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

在这里输出

DEMO