Место div рядом с фиксированным div

Question

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

Представьте себе веб-страницу twitter, я хочу зафиксировать левую панель (там, где вы пишете твиты), и рядом с ней хочу разместить панель, где вы читаете твиты.

Теперь у меня есть следующий код:

<div id="container"> 
    <div id=fixed-menu> 
    </div> 
    <div id="content"> 
    </div> 
</div> 

#fixed-menu { 
    position:fixed; 
    background: #fff; 
    padding: 10px; 
    top:60px; 
    left: 10px; 
    width:300px; 
    max-width: 300px; 
} 

#content { 
    background: #fff; 
    padding-top: 10px; 
} 

Таким образом, в DIV с ID = «содержание» появляются на левой стороне так, неподвижная меню не появляется, потому что он находится под содержанием DIV ,

Если я использую margin-left в #content, ошибка решена, но я не хочу использовать это, любое другое решение?

Спасибо.

Answer 1

Одна из первых вещей, которую следует отметить, заключается в том, что, помещая позицию Исправлено в фиксированном меню div #, вырывает ее из обычного потока документов. Это означает, что другие элементы блока/встроенного уровня не знают об этом. Также, исправляя это, вы фиксируете его относительно окна. Если вы хотите, чтобы он был «зафиксирован» внутри контейнера, а не в какой-то определенной точке экрана, я бы пошел с положением: абсолютным, а затем положением: относительным по его родительскому контейнеру.

В любом случае проблема, с которой вы сталкиваетесь, когда содержимое div # не учитывает положение фиксированного элемента, связано с тем, что фиксированный элемент больше не является частью обычного потока документов. Добавление z-index в фиксированное меню div # должно вывести его над содержимым. Тем не менее, вы увидите перекрытие и должны будете учитывать смещение содержимого div # с любым полем содержимого div # или дополнением к родительскому контейнеру.

Если вы посмотрите на эту скрипку: http://jsfiddle.net/f38aj/

CSS:

#container { 
    position: relative; 
    height: 700px; 
    padding: 0 0 0 320px; 
} 

#fixed-menu { 
    position: fixed; 
    background: red; 
    padding: 10px; 
    top:8px; 
    left: 8px; 
    width: 300px; 
    max-width: 300px; 
} 

#content { 
    background: blue; 
    padding-top: 10px; 
} 

Если вы заметили, мы создаем отступы в контейнере, где мы в конечном итоге накладывания объект DIV # контейнер.

У нас есть фиксированный контейнер слева, а правое содержимое будет прокручиваться со страницы. Если вы можете придумать нефиксированное решение, это может быть лучше, поскольку есть телефонные браузеры, такие как более старые версии iOS, которые занимают все, что фиксировано, и заменяют его абсолютной позицией.

Боковое примечание, работающее с фиксированным/абсолютным позиционированием, особенно полезно в некоторых сумасшедших случаях, но для этого требуется немного более тщательная проверка ваших частей вашей команды. Если вы начнете получать в z-индексы, вы можете захотеть взглянуть на библиотеку, как на меньшее или на то, чтобы создать глобальные переменные css, что упростит управление тем, что может превратиться в почти неуправляемый опыт.

надеюсь, что это поможет.