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