Question

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

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

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

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

Answer 1

它的行为不像是固定的，它表现得像绝对的。 fixed处理窗口滚动，而不是调整大小。你的css如下：

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

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

Answer 2

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

http://jsfiddle.net/kasperfish/Qv5q3/2/

HTML

<div id="nav_top">
    <div id="logo">logo</div>
    <div id="wrapper">
        <div id="menu">my menu</div>
        <div id="search">search</div>

    </div>

</div>

CSS

#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;

}

定位标题元素的最佳方法是什么？

2 个答案: