[英]Position Absolute doesn't work a second time
我有3个div,当我单击每个div底部的箭头时,我希望它们彼此可滚动。 由于height: 100vh
每个div都会占用全部浏览器height: 100vh
由于style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;"
每个箭头都贴在当前div的底部(因此,贴在浏览器页面的底部) style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;"
问题在于,即使第一个div的结构几乎相同,第一个div的底部也只有第一个箭头,而第二个div上的第二个箭头却没有显示。 因此,第一个箭头滚动到最后一个div,而不是第二个div。
最后但并非最不重要的一点是,我的垂直对齐方式似乎不起作用(在每个span12
下方),我想设置一个箭头以滚动到第二个div顶部的第一个div
这是 FIDDLE
码:
<!-- FIRST DIV -->
<div id="explanation" class="row-fluid" style="height: 100vh;">
<div class="span12" style="height:100%; display:table !important;">
<!-- Vertical Align center -->
<div style="display:table-cell; vertical-align:top;">
<h1 class="visible-phone" style="text-align:center;margin: 10px 0;">
Title - Explanation
</h1>
<hr style="width: 50%; margin-left: 25%;" />
<div class='container' style="padding-top: 10%;">
<div class="span3">
<h2>Sub-Title:</h2>
</div>
<div class="span9">
<h4>
<p>
This is my subtitle
</p>
</h4>
</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;">
<div class="circle-box-blue show_link_css">
<a href="#form1"><h1 class="icon-chevron-down icon-large"></h1></a>
</div>
</div>
</div>
<!-- SECOND DIV -->
<div id="form1" class="row-fluid" style="height: 100vh;">
<div class="span12" style="height:100%; display:table !important;">
<!-- Vertical Align center -->
<div style="display:table-cell; vertical-align:top;">
<h1 class="visible-phone" style="text-align:center;margin: 10px 0;">
Title - Form1
</h1>
<hr style="width: 50%; margin-left: 25%;" />
<div class='container' style="padding-top: 10%;">
<div class="span3">
<h2>Sub-Title:</h2>
</div>
<div class="span9">
<h4>
<p>
This is my subtitle, for my form1
</p>
</h4>
</div>
</div>
</div>
</div>
<!-- THIS ARROW ISNT EVEN BEING DISPLAYED! -->
<div style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;">
<div class="circle-box-blue show_link_css">
<a href="#button"><h1 class="icon-chevron-down icon-large"></h1></a>
</div>
</div>
</div>
<!-- LAST DIV -->
<div id="button" class="row-fluid" style="height: 100vh;">
<div class="span2">Last Div</div>
</div>
任何帮助将不胜感激,谢谢。
position: absolute;
将元素绝对相对于最接近的祖先进行定位 。 在您的情况下,由于未定位包装div
,这意味着箭头相对于页面定位,因此它们都位于同一位置。
尝试添加position: relative
对于您的环绕div。
如果使用位置:绝对; 该位置是绝对的,并且对象将放置在完全相同的位置。 您可以将第一个div和第二个div设为绝对,然后将获得所需的结果。 箭头对div是绝对的。
当您将元素添加到同一位置时,检查DOM后,您会发现用css check编辑的小提琴出现了问题,它将使您知道问题出在哪里以及要实现的目标。您应该查看<hr style="width: 50%; margin-left: 25%;" />
<hr style="width: 50%; margin-left: 25%;" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.