CSS relative positioning, keeps changing

So Basically I have a <div> which contains two buttons. I want to position these buttons (the div) in a certain point in the page within another .

I didn't really give it much thought and I set the positioning using relative and got it positioned where I wanted. However, whenever I came back to it a couple of days later, its misplaced again and I haven't changed the CSS.

So here is my CSS for the div:

#button_menu {
position: relative; 
top: 263px; 
left: 710px;  
w开发者_高级运维idth: 250px; 
}

and basically I want it always positioned in the same location within a particular div 'bodyArea'

<div id="bodyArea">

<div id="button_menu">
<input type="button" class="smallbutton" id="add" value="add"/>
<input type="button" class="smallbutton" id="remove" value="remove"/>
</div>

.....

I am assuming I am doing it wrong, so If somebody could explain to me how I can achieve what I actually want?

many thanks,

Give relative positioning to the element "bodyArea", and absolute position to "button_menu".

Go sth like this:

#bodyArea {position: relative; width: 250px;}
#button_menu {position: absolute; left: 100px; top: 100px;}

You must realize that the elements thats needs to fixed shud be positioned "absolute" and their position is relative to closest parent that is positioned "relative" (default is "body").

You need the parent div to be position: relative; and the child div to be position: absolute;:

#bodyArea {
    position: relative;
}

#button_menu {
    position: absolute; 
    top: 263px; 
    left: 710px;  
    width: 250px; 
}