Question

在此页面（使用bootstrap制作）：已删除我进行了设置，以便您按下左侧的I - info按钮，并显示带有用户图片和说明的div。

当出现此div时，.mastfoot div中包含的图形会向上移动。我希望它是这样当我点击I信息按钮并显示div时，.mastfoot不会移动。

如何实现这一点的任何想法将不胜感激。

这是我的show hide按钮和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

你应该移除位置：从桅杆上固定，否则它将始终保持在同一位置，因为它是根据视口定位的。

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

单击div时，保持元素不移动

3 个答案: