Вы должны указать верхнюю и левую позиции и добавить position:relative
к непосредственному родителю:
#center {
float: left;
width: 300px;
height: 500px;
background-color: green;
position:relative;
}
#menu {
width: 300px;
height: 45px;
background-color: pink;
position: absolute;
z-index: 1000;
top: 100px;
left: 0;
}
И живой пример: http://jsfiddle.net/ambiguous/vRJMd/
По умолчанию left
равно auto
, и это более или менее означает, что браузер может делать все, что он считает разумным. Кроме того, абсолютно позиционированные элементы располагаются относительно ближайшего предка с позицией, которая не является static
(что, вероятно, <body>
в вашем случае).