位置绝对不会再次工作

时间:2014-03-13 11:18:30

标签: javascript html css html5 twitter-bootstrap

我有3个div,我希望它们在单击每个div底部的箭头时可以相互滚动。 由于height: 100vh

,每个div都需要完整的浏览器高度

由于style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;"

,每个箭头都粘贴在当前div的底部(因此,粘贴在浏览器页面的底部)

问题是只有第一个箭头粘在第一个div的底部,第二个div上的第二个箭头不会显示,即使这些div的strcutres几乎相同。因此,第一个箭头滚动到最后一个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>

非常感谢任何帮助,谢谢。

3 个答案:

答案 0 :(得分:3)

position: absolute;将元素相对于最近定位的祖先绝对定位。在您的情况下,因为您的包装div没有定位,这意味着箭头相对于页面定位,因此它们都位于相同的位置。

尝试将position: relative添加到您的包装div。

答案 1 :(得分:0)

如果你使用position:absolute;位置是绝对的,对象将放在完全相同的位置。您可以将第一个div和第二个div设为绝对,然后您将获得所需的结果。箭头对于div来说是绝对的。

答案 2 :(得分:0)

当您在同一位置添加元素时检查DOM后,您将看到css检查问题editted fiddle它会让您了解问题所在以及您想要实现的目标。您应该看看<hr style="width: 50%; margin-left: 25%;" />