javascript - CSS overlay div 显示不正确

Question

我需要在点击内容上的按钮后显示 div。导致显示 dev 的按钮不在页面顶部(您必须向下滚动)。但是overlay div显示错误，就像图片一样。如何修改代码以始终在页面中间显示覆盖 div。

HTML:

 <div id="rating_overlay"></div>
<div id="rating_content">
    <div class="overlay_exit">
        <a href="javascript:void(0)" onmousedown="toggleOverlay()" title="Zavřít">
            <i class="fa fa-times fa-2x"></i>
        </a>
    </div>
    <h2>Přidat hodnocení</h2>
    <div id="profil_add_rating">
       <!-- Content -->
    </div>
</div>
<div id="rating_wrapper"></div>
<script type="text/javascript">
    function toggleOverlay() {
        var overlay = document.getElementById('rating_overlay');
        var specialBox = document.getElementById('rating_content');
        overlay.style.opacity = .8;
        if (overlay.style.display == "block") {
            overlay.style.display = "none";
            specialBox.style.display = "none";
        } else {
            overlay.style.display = "block";
            specialBox.style.display = "block";
        }
    }
</script>

CSS:

 #rating_overlay {
    display: none;
    z-index: 2;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
}
#rating_content {
    display: none;
    position: relative;
    z-index: 3;
    padding: 16px;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 260px;
    background: #FFF;   
    text-align: left;
}

#rating_wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left:24px;
}

编辑: position: fixed 的解决方案有效，但我将使用 http://drublic.github.io/css-modal/ .

Answer 1

CSS 的 position: fixed; 是你的 friend

position fixed 表示“把这个元素放在根据窗口的绝对位置”

“始终位于顶部和中心(水平)”的 CSS 可以是:

#rating_wrapper{
  position: fixed;
  top: 0;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}

编辑: jsfiddle 展示:http://jsfiddle.net/m4Fbk/

CZ: fixni pozice je popsana i na jakpsatwebu ;) http://www.jakpsatweb.cz/css/position.html