Sticky nicht

Question

Arbeits Ich habe drei divs, wo die ersten div Google-Charts mit einem href

die zweite div hinzugefügt werden, ist nur eine von einer dritten div gefolgt Overlay, die iframe

Die CSS hat die die Lasten dritte Div-Position absolut und funktioniert gut, bleibt aber beim Scrollen nicht auf dem Bildschirm. wenn eine die dritte div Position klebrig es am unteren Rand des Bildschirms befindet sich unter dem zweiten div Overlay abgeblendet

var btn1_Div = document.getElementById(itemId.itemID + "_div"); 
 

 
//Create and append button 
 
var btn1 = document.createElement("a"); 
 
var t = document.createTextNode("Bid Offer Data"); 
 
var classId = itemId.itemID 
 
btn1.appendChild(t); 
 
btn1.id = 'boddata'; 
 
btn1.setAttribute('class', classId); 
 
btn1.href = "BOD3.php"; 
 

 
btn1_Div.appendChild(btn1); 
 

 
$(document).ready(function() { 
 
    $(document).on('click', 'a', function(e) { 
 
    e.preventDefault(); 
 
    if ($(this).attr('id') == "boddata") { 
 
     var url = $(this).attr('href'); 
 
     var bumid = $(this).attr('class'); 
 
     $("#overlay_div").append('<iframe id="bod" width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" src="' + url + '?bmu=' + bumid + '"></iframe>'); 
 
     $("#overlay").fadeIn("slow"); 
 
     $("#overlay_div").fadeIn("slow"); 
 
    }; 
 
    }) 
 
    $("#close_button").click(function() { 
 
    $("#bod").remove(); 
 
    $("#overlay").fadeOut("fast"); 
 
    $("#overlay_div").fadeOut("fast"); 
 

 
    }) 
 
});

#overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #f0f0f0; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0.9; 
 
    z-index: 1000; 
 
    display: none; 
 
} 
 

 
#overlay_div { 
 
    width: 600px; 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    top: 80%; 
 
    right: 20%; 
 
    bottom: 80%; 
 
    left: 20%; 
 
    z-index: 1500; 
 
    box-shadow: 0 0 50px #000; 
 
    -o-box-shadow: 0 0 50px #000; 
 
    -moz-box-shadow: 0 0 50px #000; 
 
    -webkit-box-shadow: 0 0 50px #000; 
 
    -ms-box-shadow: 0 0 50px #000; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="charts"></div> 
 

 
<div id="overlay"></div> 
 
<div id="overlay_div"> 
 
    <div id="close_button">x</div> 
 
</div>

Answer 1

ist es das Sie versuchen, achive wie ich verstehen ?? ?

DEMO

Edit: benutzte ich als Position fixiert und und nach links, rechts, oben, unten sind 0 auch als Auto hinzugefügt Marge. Dies erlaubt mir, das div in die Mitte des Bildschirms zu bringen. wenn du absolut verwendest geht es zwar beim scrollen aber fix fixiert sich dort auch wenn du scrollst.