2

我有一个div标题，position:fixed里面有徽标、菜单和搜索选项。logo在左边，menu在中间，search在右边，logo和menu有相对位置，而search有position:absolute。

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

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

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

jsfiddle

4

2 回答 2

3

它不是固定的，而是绝对的。 fixed处理窗口滚动，而不是调整大小。你的CSS如下：

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

通过说right: 20px，您将元素设置为距其最近定位的祖先的右边框保持 20px 。这将在窗口调整大小时保持。如果您不希望它在调整窗口大小时移动，也许您可​​以从左侧而不是右侧定位它。

于 2013-09-23T14:17:22.230 回答
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>

于 2013-09-23T14:40:44.147 回答