Question

尝试在叠加层中创建联系表单。我有覆盖div工作，但它只有在我将其设置为“position：absolute”时才有效。无论我尝试什么，叠加层内的div都不会正确定位。

需要“将表格包装垂直居中并水平放置。

<div id="overlay">
    <div id="form-wrap">
        <img id="close-btn" src="images/framework/close.png">
        <form id="form-box">
            <input name="first-name" id="first-name" type="text" maxlength="32">
        </form>
    </div>
</div>

#overlay{
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    position: absolute;
    z-index: 899;
    display: none;
    background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
    width: 400px;
    height: 600px;
    position: relative;
    z-index: 900;
    margin: 0;
    background-color: white;
}

Answer 1

试试这个：

#overlay{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 899;
    display: none;
    background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
    width: 400px;
    height: 600px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -200px;
    background-color: white;
}

Example

Answer 2

仅当叠加层的高度大于600px时才会有效！

#overlay{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 899;
    display: none;
    background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
    width: 400px;
    height: 600px;
    top: 50%;
    position: relative;
    z-index: 900;
    margin: -300px auto 0 auto;
    background-color: white;
}

Example

将div定位在叠加层内

2 个答案: