Question

当我加载我的页面时，（它是用Bootstrap制作的 - http://themejulies.tumblr.com），它看起来像这样：

image of issue

当我按下左上角的信息按钮（打开一个div）时，向页面底部的小向下箭头向上移动。

image of issue

如何制作它以便我可以点击信息按钮打开div，并且小向下箭头不会向上移动？

以下是代码：

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

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

    <div class="input-group">

</div>
    <form action="/search" method="get">

      <input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}" class="form-control" placeholder="Search for...">
          </form>


    </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">
      Pages
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
     {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li> {/block:Pages} {/block:HasPages} 
    </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}



      <div class="site-wrapper-inner">

        <div class="cover-container">






          <div class="inner cover">
            <h1 class="pagetitle" style="position:relative; font-family:{text:Google Web Font name Title}; font-weight:700; color:{color:Title and Tagline Text};">{Title}</h1>
       {block:ifShowTagLine} <p class="pagedesc" style="postition:relative; font-family: {text:Google Web Font name Tagline}, sans-serif; font-weight:500; color:{color:Title and Tagline Text};">{text:Tagline}</p>{/block:ifShowTagLine}
          </div>

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

        </div>

      </div>

    </div>

    <div class="container-fluid" id="bottom">Test</div>

Answer 1

设置单击信息按钮时显示的div

    position:absolute;
    background: #333;

这将把它拉出文档流程，不会影响其他div

或者如果那不是您要寻找的效果，请使用向下箭头将div设置为position：absolute;

Answer 2

@media (min-width: 768px) {
  .mastfoot {
   position: absolute;
   }
}

问题在于position:absolute

当我点击打开另一个div时，现有的div会移动吗？

2 个答案: