绝对排名第二次不起作用

Question

I got 3 divs, and I want them to be scrollable to one each other when clicking on an arrow in the bottom of each div. Every divs takes the full browser height thanks to height: 100vh

Each arrows are sticked to the bottom of the current div (so, sticked to the bottom of the browser page), thanks to style="position: absolute; bottom: 0; right: 0; left: 0; margin: auto;"

The problem is that only the first arrow is sticked to the bottom of the first div, the second arrow on the second div isn't displayed, even though the strcutres of those divs are nearly identical. Therefore, the first arrow scrolls to the last div, instead of the second div.

Last but not least, my vertical align doesn't seem to be working (below each span12 ), and I'd like to set an arrow to scroll to the first div in the top of my second div

Here is the FIDDLE

Code:

<!-- 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>

Any help would be greatly appreciated, thanks.

Answer 1

position: absolute; positions the elements absolutely relative to the closest positioned ancestor . In your case, because your wrapper div s aren't positioned, that means the arrows are positioned in relation to the page, and so both of them are in the same place.

Try adding position: relative to your wrapping divs.

Answer 2

If you use position: absolute; the position is absolute and the object will be placed on the exact same location. You can make the first div and the second div absolute and you will get the result you want. The arrows will be absolute to the div.

Answer 3

As you are adding the element on the same location After checking the DOM you will see that problem with your css check editted fiddle it will give you an idea where the problem is and what you want to achieve.You should look into <hr style="width: 50%; margin-left: 25%;" /> <hr style="width: 50%; margin-left: 25%;" />