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

我有一个div标题与position:fixed其中有标志，菜单和搜索选项里面。徽标位于左侧，中间的菜单和右侧搜索，徽标和菜单有相对位置，而搜索有position:absolute。定位标题元素的最佳方法是什么？

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

我不确定最新的问题，但我想有以下几点：我希望我的标题位于顶部，但是当我调整窗口大小时，我不希望搜索和菜单移动，我只是希望他们不要动，如果窗户的大小超过他们，他们就不应该被看到。

那么最好的方法是什么？保持标题div固定并将其他div放在绝对位置，相对位置或其他位置？

jsfiddle

来源

2013-09-23 Vladimir

您可以发布您的代码的的jsfiddle？从你的话说，它应该工作，所以我们需要看看你的代码的其余部分 – SaturnsEye

它不像个固定的，它的作用就像是绝对的。 fixed涉及窗口滚动，而不是调整大小。你的CSS如下：

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

按说right: 20px，要设置的元素从右边框留20像素的它最近的定位的祖先。当窗口调整大小时，这将保持不变。如果在窗口大小调整时不希望它移动，也许可以从左侧而不是右侧来定位它。

来源

2013-09-23 14:17:22

好吧，这看起来好多了。但仍然存在一个小问题。当我调整窗口大小时，就在搜索div消失之前，它会变成水平。 – Vladimir

该div可能试图调整大小以适应窗口内的任何方式。要么给它一个固定的宽度，要么使用'white-space：nowrap'，它应该没问题。另一种选择是在你的头上有一个“最小宽度”，所以它永远不会缩小到足以导致这种情况。 –

给你的#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; 

}

来源

2013-09-23 14:40:44

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

回答

相关问题