Javascript 当我单击打开另一个div时,现有div是否会移动?
当我加载我的页面时(它是用引导程序制作的),它看起来像这样: 当我按下左角的info按钮(打开一个div)时,页面底部的小向下箭头向上移动 我如何使它,使我可以点击信息按钮打开div,小向下箭头不会向上移动 下面是代码:Javascript 当我单击打开另一个div时,现有div是否会移动?,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,当我加载我的页面时(它是用引导程序制作的),它看起来像这样: 当我按下左角的info按钮(打开一个div)时,页面底部的小向下箭头向上移动 我如何使它,使我可以点击信息按钮打开div,小向下箭头不会向上移动 下面是代码: <div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;"> <center> <div cla
<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>
{AuthorName}
{Description}
页
{block:ifShowInfoButton}
{/block:ifShowInfoButton}
{Title}
{block:ifShowTagLine}{text:Tagline}
{/block:ifShowTagLine}
试验
将单击“信息”按钮时显示的div设置为
position:absolute;
background: #333;
这会将其从文档流中拉出,并且不会影响其他div
或者,如果这不是您想要的效果,请使用向下箭头将div设置为position:absolute
@media (min-width: 768px) {
.mastfoot {
position: absolute;
}
}
问题在于位置:绝对的,在我看来,它似乎停留在同一个地方。正如伟大的阿尔伯特·爱因斯坦曾经说过的那样。“代码在哪里?我们不想单击指向另一个网页的链接。”@dowomenfart-刚刚添加了代码,对此表示抱歉。@MattEllen-您使用的浏览器是什么?我正在查看您的图像这一点,以及将div设置为绝对位置不起作用。