放置标题元素的最佳方法？

Question

我有一个div标头，其中的position:fixed内有徽标，菜单和搜索选项。徽标位于左侧，菜单位于中间，而搜索位于右侧，徽标和菜单具有相对位置，而搜索具有position:absolute。

现在，问题来了。当我调整浏览器窗口的大小时，搜索div与浏览器窗口的右上角保持固定距离，然后当我进一步调整它的大小时，它与菜单div重叠并向下推。

我不确定是什么问题，但是我想要以下内容：我希望标题位于顶部，但是当我调整窗口大小时，我不希望移动搜索和菜单，我只是希望它们不移动，并且如果在它们上方调整了窗口的大小，则不应看到它们。

那么最好的方法是什么？保持标头div固定，并将其他div定位为绝对，相对还是第三位？

jsfiddle

Answer 1

它的作用不像固定的，它的作用像绝对的。 fixed处理窗口滚动，而不处理其大小。您的CSS如下：

#tr_corner {
    position:absolute;
    top:10px;    
    right:20px;    
}

通过说right: 20px，您正在将元素设置为距离其最接近的祖先的右边界20px。调整窗口大小时，将保持此状态。如果您不希望在调整窗口大小时移动它，则可以将其从左侧而不是右侧放置。

Answer 2

给您的#nav_top一个定义的宽度，而不是100％。如果nav_top必须具有100％的宽度，则需要将搜索和菜单包装在具有定义宽度的div中。

请参阅此-

#nav_top{
    height:75px;
    width:100%;
    background:blue;
    position:fixed;
    top:0px;
    left:0px;
}

#logo{
    width:50px;
    height:75px;
    float:left;
    background:yellow;
}
#wrapper{
    width:800px;
    border:1px solid red;
    height:50px;
    left:200px;
    position:relative;
}
#menu{
    float:left;
    background:pink;
}

#search{
    float:right;
    background:green;
}

<div style="height:75px;width:100%;background:blue;position:fixed;top:0px;left:0px;">
    <div id="logo">logo</div>
    <div id="wrapper">
        <div id="menu">my menu</div>
        <div id="search">search</div>
    </div>
</div>