Question

我有三个div，其中第一个div谷歌图表添加了一个href

第二个div只是一个叠加后跟第三个div加载iframe

css具有绝对的第三个div位置并且工作正常但在滚动时不会保留在屏幕上。如果将第三个div位置设置为sticky，则它位于屏幕底部，在第二个div叠加下显示为灰色

＆＃13;

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");

  })
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

这是你想要实现的，因为我理解???

<强> DEMO

编辑：我使用固定作为位置而且左，右，上，下都是0也添加了自动边距。这让我把div放到屏幕中间。如果你使用绝对值，它会在滚动时消失，但即使你滚动也固定在那里。

粘性不起作用

1 个答案: