CSS叠加div无法正确显示

Question

我需要在点击内容后显示div。导致显示开发的按钮不在页面顶部（您必须向下滚动）。但叠加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;是你的朋友

固定位置说“根据窗口将此元素置于绝对位置”

“始终在顶部和中心（horizo​​ntaly）的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

Answer 2

您应该使用position: fixed代替relative代替#rating_content { display: none; position: fixed; left: 50%; top: 50%; margin: -130px 0 0 -250px; width: 500px; height: 260px; ... } ，并使用左上角+边距值更正位置：

{{1}}

演示：http://jsfiddle.net/sRrBL/