Лучший способ позиционирования элементов заголовка?

Question

У меня есть заголовок div с position:fixed, у которого есть логотип, меню и опция поиска внутри. Логотип расположен слева, меню посередине и поиск справа, логотип и меню имеют относительные позиции, в то время как поиск имеет position:absolute.

Теперь возникает проблема. Когда я изменяю размер окна браузера, поисковый div остается на фиксированном расстоянии от верхнего правого угла окна браузера, а затем, когда я изменяю его размер больше, он перекрывается с разделом меню и отталкивает его.

Я не уверен, в чем проблема, но я хотел бы иметь следующее: я хочу, чтобы заголовок был сверху, но когда я изменяю размер окна, я не хочу, чтобы поиск и меню перемещались, Я просто хочу, чтобы они не двигались, и если окно изменилось по их размерам, их не следует видеть.

Так что это лучший способ сделать это? Держать заголовок div фиксированным и позиционировать другие divs абсолютным, или относительным, или чем-то третьим?

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 с определенной шириной. посмотреть 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; 

}