Держите элемент перемещающимся, когда div появляется по щелчку

Question

На этой странице (сделанной с бутстрапом): удален У меня он настроен так, что вы нажимаете кнопку I-info в левом углу, а div появляется с изображением пользователя и описание.

Когда появится этот div, графический объект, содержащийся в div .mastfoot, перемещается вверх. Я хочу, чтобы это было так, что когда я нажимаю кнопку I info и появляется div, что .mastfoot не перемещается.

Любые идеи о том, как реализовать это, будут оценены.

Вот мой код кнопки показать скрыть и DIV:

 <div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;"> 
     <center> 
     <div class="container-fluid" style="height:auto;"> 
     <div class="row"> 
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div> 
    <div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div> 

    <div class="container-fluid" style="height:auto; margin-bottom:2%;"> 
    <center> 
    <div class="container-fluid"> 

    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search for..."> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div><!-- /input-group --> 
    <br/> 
    <div class="btn-group" role="group" aria-label="..."> <a href="{BlogURL}ask" button class="btn btn-default" type="button">Ask</a> 

    <a href="{BlogURL}archive" button class="btn btn-default" button class="btn btn-default" type="button">Archive</a> 

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
     Dropdown 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;"> 
     <li><a href="#">Dropdown link</a></li> 
     <li><a href="#">Dropdown link</a></li> 
    </ul> 
    </div><!-- /.col-lg-6 --></center> 
    </div> 
</div> 
</div> 
</div> 
    <div class="site-wrapper"> 
    {block:ifShowInfoButton} 

    <a href="#" style="text-decoration:none;" onclick="toggle_visibility('foo');"><i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i></a> 


    {/block:ifShowInfoButton} 

Вот код для .mastfoot:

<div class="mastfoot"> 
      <div class="inner"> 
       <i class="fa fa-angle-down fa-5x"></i></div> 
      </div> 

Answer 1

Вы должны удалить позицию: фиксированный с mastfoot, в противном случае он будет всегда остается в том же положении, поскольку он расположен в соответствии с окном просмотра.

Answer 2

Я думаю, что ваш вопрос указан с противоположным намерением. В вашем вопросе говорится, что вы не хотите, чтобы изображение перемещалось. В настоящее время изображение не перемещается, так как оно «фиксировано». Все остальное движется.

Предполагая, что вы хотите, напротив этого действия вы можете удалить следующую строку CSS из файла, чтобы изображение двигаться с остальной частью страницы: position: fixed; /** REMOVE THIS LINE **/

@media (min-width: 768px) { 
    /* Pull out the header and footer */ 
    .masthead { 
    position: fixed; /** REMOVE THIS LINE **/ 
    top: 0; 
    } 
    .mastfoot { 
position:fixed; bottom: 0; 
    } 
    /* Start the vertical centering */ 
    .site-wrapper-inner { 
    vertical-align: middle; 
    } 
    /* Handle the widths */ 
    .masthead, 
    .mastfoot, 
    .cover-container { 
    width: 100%; /* Must be percentage or pixels for horizontal alignment */ 
    } 
} 

Answer 3

Для того, чтобы сделать то, что я тебе верю пытаются добиться попытаться изменить #foo к этому:

#foo{ 
position:absolute; 
background-color:#333333; 
top:0; 
} 

, а также добавить z-index:100; к кнопке информации. Это предотвратит отбрасывание фона при открытии информационного меню.

ИЛИ если я неправильно понял, и вы хотите его в нижней части он может быть таким:

#foo{ 
position:absolute; 
background-color:#333333; 
bottom:0; 
}