CSS 相对定位，不断变化

Question

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;  
width: 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,

Answer 1

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").

Answer 2

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; 
}