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

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

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

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

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

jsfiddle


css css-position absolute fixed
person Vladimir    schedule 23.09.2013    source источник
comment
Можете ли вы опубликовать JSFiddle вашего кода? исходя из того, что вы говорите, это должно работать, поэтому нам нужно будет увидеть остальную часть вашего кода   -  person SaturnsEye    schedule 23.09.2013

Ответы (2)


arrow_upward
2
arrow_downward

Он действует не как фиксированный, а как абсолютный. fixed имеет дело с прокруткой окна, а не с изменением его размера. Ваш css выглядит следующим образом:

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

Говоря right: 20px, вы устанавливаете элемент так, чтобы он оставался в 20 пикселях от правой границы его ближайшего предка. Это будет сохранено при изменении размера окна. Если вы не хотите, чтобы он перемещался при изменении размера окна, возможно, вы можете расположить его с левой стороны, а не с правой.

person James Montagne    schedule 23.09.2013
comment
Хорошо, теперь это выглядит намного лучше. Но есть еще небольшая проблема. Когда я изменяю размер окна, как раз перед тем, как поисковый элемент div исчезнет, ​​он станет горизонтальным. - person Vladimir; 23.09.2013
comment
Div, вероятно, пытается изменить размер, чтобы поместиться внутри окна любым возможным способом. Либо дайте ему фиксированную ширину, либо используйте white-space: nowrap, и все должно быть в порядке. Другой альтернативой может быть min-width в вашем заголовке, чтобы он никогда не уменьшался настолько, чтобы вызвать это. - person James Montagne; 23.09.2013

arrow_upward
1
arrow_downward

Дайте вашему #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>

person kasper Taeymans    schedule 23.09.2013