javascript - Button behind table appears when user scrolls past all rows -

i want display large table users. ensure see data before proceed next step want hide "next" button in way visible after user has scrolled past rows.

i button hiding behind table along, instead of having button pop in , out of existence.

so far have experimented fixed positions , z-indexes this:

<div id="container> <table id="table" class="table"> <!-- lot of rows, asynchronously bound images in cells --> </table> <button id="button" class="nextbutton">   next </button> </div> 

and css:

.nextbutton {   position: fixed;   bottom: 0px;   right: 0px;   z-index: -1; }  .table {   background-color: white;   width: 100%; } 

now button not accessible if table larger window, page's content height not take account button's height. try increase artificially height code such as

$(window).load(function() {   var height = $("#button").height();   $("#container").height("+=" + height); }); 

jsfiddle (note must resize "result" pane small enough table hide button) have run issues.

the first issue prefer declaratively. second, button cannot clicked though visible, browser seems believe clicking div. lastly, resides in angular project, , window.ready doesn't seem trigger properly.

what doing wrong?

the fixed sized button may not make document grow, can use margin of table so.

give table margin-bottom value larger or equal buttons's height:

.table {   background-color: white;   width: 100%;   margin-bottom:50px; } 

here fiddle