CSS и позиция небольшая проблема

Question

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

вот изображение: http://img12.imageshack.us/img12/827/whyw.png http://img12.imageshack.us/img12/827/whyw.png

Что я делаю не так?

Вот мой код:

#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
}

#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
}

Answer 1

Если вы хотите использовать position:absolute, вам нужно установить родителя на position:relative. Это потому, что position:absolute позиционируется относительно последнего родителя, который позиционируется. По умолчанию это элемент вашего тела. Это означает, что ваш блок будет установлен относительно тела, поэтому, когда вы изменяете размер своего браузера, ваш блок перемещается из исходного положения.

Если вы установили родителя с position:relative, ваш блок будет установлен относительно него. Вам просто нужно установить верхнюю / нижнюю и / или левую / правую координаты.

Что-то вроде этого должно сработать:

#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
top: 50px;
right: -10px;
}

#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
position: relative;
}

Answer 2

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

Посмотрите здесь для получения более подробной информации:

http://webdesign.about.com/od/advancedcss/a/aa061307.htm

Надеюсь, это поможет!