絕對排名第二次不起作用

Question

我有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>

任何幫助將不勝感激，謝謝。

Answer 1

position: absolute; 將元素絕對相對於最接近的祖先進行定位 。 在您的情況下，由於未定位包裝div ，這意味着箭頭相對於頁面定位，因此它們都位於同一位置。

嘗試添加position: relative對於您的環繞div。

Answer 2

如果使用位置：絕對； 該位置是絕對的，並且對象將放置在完全相同的位置。 您可以將第一個div和第二個div設為絕對，然后將獲得所需的結果。 箭頭對div是絕對的。

Answer 3

當您將元素添加到同一位置時，檢查DOM后，您會發現用css check編輯的小提琴出現了問題，它將使您知道問題出在哪里以及要實現的目標。您應該查看<hr style="width: 50%; margin-left: 25%;" /> <hr style="width: 50%; margin-left: 25%;" />