Блог

Главная - Вопросы по программированию - Как я могу поместить дочерний div в фиксированную позицию родительского div, чтобы при изменении места родительского div дочерний div перемещался автоматически?

Как я могу поместить дочерний div в фиксированную позицию родительского div, чтобы при изменении места родительского div дочерний div перемещался автоматически?

#html #css

#HTML #css

Вопрос:

На моей веб-странице у меня есть div для моего заголовка. 

  <div id="top-bar">
      <div id="headbar">
            <img src="images/headbar.jpg" border="0" alt="">
         <div id="loginbtn"><img src="images/loginbtn.png" border="0" alt=""></div>
        </div>
</div>

css для этого следующий:

  body 
 { 
margin:0; 
padding:0 
 }

  # headbar 
 { 
background:#A4DF00;
width: 1019px;
height: 185px;
text-align:center;
margin:0 auto;
 }

 # top-bar
 {
background:#AFDF04;
height: 187px;
 }

 # loginbtn
{
width: 160px;
hight: 69px;
position: absolute;
top: 20px;
left: 830px;
}

Я хотел, чтобы мой заголовок был посередине, когда пользователь увеличивает размер проводника. Это работает нормально. С помощью этого css место кнопки входа в систему фиксировано. Я хочу фиксированное место входа в кнопку в заголовке div. Когда пользователь увеличивает размер проводника, а заголовок остается в центре, кнопка входа также должна занимать нужное место в заголовке div. Как я могу это сделать? Заранее спасибо.

Ответ №1:

Добавить:

 #headbar {
    position:relative;
}

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

1. Это правильно! position: absolute; ссылается на следующий родительский элемент с position: relative; помощью .

2. В любом случае, просто для добавления, вы можете использовать right: вместо left: , это необязательно, но я думаю, вам будет проще указать пробел с правого края.

Ответ №2:

Вы расположили кнопку входа в систему «абсолютной», в то время как вы хотите, чтобы она была относительно строки заголовка (т. Е. Абсолютно расположена относительно строки заголовка). Кроме того, кажется, что ваша кнопка входа находится в правой части строки заголовка, судя по размеру и положению. Так что вы могли бы просто удалить position: absolute и применить

 float: right;

и некоторый запас, скажем

 margin-top: 20px;
margin-right: 20px;

чтобы зафиксировать его на нужном месте.