Position Absolute第二次不起作用

Position Absolute doesn't work a second time

本文关键字：不起作用 第二次 Absolute Position      更新时间：2023-09-26

我有3div，我希望他们是可滚动到彼此时，单击每个div底部的箭头。由于height: 100vh

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

每个箭头都粘贴到当前div的底部(因此，粘贴到浏览器页面的底部)，感谢style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;"

问题是，只有第一个箭头被粘贴到第一个div的底部，第二个div上的第二个箭头不显示，即使这些div的结构几乎相同。因此，第一个箭头滚动到最后一个div，而不是第二个div。

最后但并非最不重要的是，我的垂直对齐似乎不工作(在每个span12下面)，我想设置一个箭头滚动到我的第二个div

顶部的第一个div

是小提琴

代码:

<!-- 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 s没有定位，这意味着箭头是相对于页面定位的，所以它们都在同一个地方。

尝试添加position: relative到你的换行符

如果使用position: absolute;位置是绝对的，物体将被放置在完全相同的位置。你可以让第一个div和第二个div是绝对的，你会得到你想要的结果。箭头对于div来说是绝对的。

当你在相同的位置添加元素检查DOM后，你会看到你的css检查编辑的问题，它会给你一个想法，问题在哪里，你想要实现什么。您应该查看<hr style="width: 50%; margin-left: 25%;" />

相关文章：