Относительное позиционирование CSS, продолжает меняться

#css #css-position

#css #css-position

Вопрос:

Итак, в основном у меня есть <div> , который содержит две кнопки. Я хочу расположить эти кнопки (div) в определенной точке страницы внутри другой.

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

Итак, вот мой CSS для div:

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

и в принципе я хочу, чтобы оно всегда располагалось в одном и том же месте в пределах определенного 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>

.....
  

Я предполагаю, что я делаю это неправильно, поэтому, если кто-нибудь может объяснить мне, как я могу достичь того, чего я на самом деле хочу?

большое спасибо,

Ответ №1:

Задайте относительное позиционирование элементу «bodyArea», а абсолютное положение — «button_menu».

Сделайте что-то вроде этого:

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

Вы должны понимать, что элементы, которые необходимо фиксировать, должны быть расположены «абсолютными», а их положение относительно ближайшего родительского элемента, который расположен «относительно» (по умолчанию «body»).

Комментарии:

1. Или, возможно #buttonArea{...rel...} , и .smallButton{...abs...}

Ответ №2:

Вам нужно, чтобы родительский div был position: relative; , а дочерний div был position: absolute; :

 #bodyArea {
    position: relative;
}

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