Question

我希望每次显示时都会在视口中显示一个对话框div而不使用position: fixed;。基本上当单击下面示例中的 Show 按钮时，我希望对话框出现在其位置固定的位置，但我希望它的位置是绝对的。或者，在稍微不同的词语中，我“......希望它被定位就像它已被修复，然后在放置后立即停止修复。” （感谢apsillers）我希望它为position: absolute;，以便我仍然可以在浏览器中滚动它，但我仍然希望它在最初显示时显示在视口中。

我尝试了很多来自here，here和here的不同CSS，但似乎没有一个符合我的要求。请注意，我不能使用JQuery或其他JS库。

.dialog {
  position: absolute;
}

<div>
  <div id="dialog" class="dialog" style="display:none;">Dialog</div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button onclick="document.getElementById('dialog').style.display=null;">Show</button>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button onclick="document.getElementById('dialog').style.display=null;">Show</button>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button onclick="document.getElementById('dialog').style.display=null;">Show</button>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button onclick="document.getElementById('dialog').style.display=null;">Show</button>
</div>

Answer 1

您可以使用带滚动位置跟踪的绝对定位对话框。

document.addEventListener('scroll', function(){
     var body = document.body;
     var top = body.scrollTop || body.parentElement.scrollTop;
     document.getElementById('#yourPoupUp').style.top = top + 'px';
});

（如果您需要旧的IE支持，请使用document.attachEvent()添加相同的处理程序）

但我不推荐这种方式。如果可能，请使用position:fixed。

Answer 2

选择<div id="dialog" class="dialog" style="display:none;">Dialog</div>

并把它放在任何容器div之外，所以它只在html＆amp;身体元素。

添加此css html,body{position:relative;height:100%}

那应该是你的黄金。

Answer 3

您需要使用position:fixed代替absolute或relative。

position:fixed表示元素相对于浏览器窗口定位。

修改

没有意识到你说你不想这样做，请解释原因。

我该如何定位：绝对;对话框最初出现在视口内，无论页面滚动到哪里？

3 个答案: