将 div 定位在其他 2 个 div 上

Question

目前我正在建立一个网站，我想要一个小的联系表单来重叠背景图像和上方和下方的部分 div...

我已经阅读了有关将其定位为绝对并将您的位置设置为顶部和右侧的信息，在我的dreamweaver 中它看起来像我想要的，但是当我在浏览器中打开它时（在dreamweaver 中它是一个较小的屏幕）容器是放置在页面下方太远。这与屏幕尺寸和响应式设计有关吗？ ps：我是新手，所以我的代码可能很乱。

html:

<div id="contact">
    <div id="container"></div>
</div>

CSS：

#container {
    background-color: #FFFFFF;
    width: 700px;
    height: 500px;
    margin: auto;
    border-radius: 15px;
    box-shadow: 0px 0px 70px 5px #000000;
    position: absolute;
    left: 30%;
    top: 720%;
}

Answer 1

#container {
    background-color: #FFFFFF;
    width: 700px;
    height: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index:99999;
    border-radius: 15px;
    box-shadow: 0px 0px 70px 5px #000000;
    position: absolute;
    transform: translate(-50%);
}

Answer 2

<div class="contact">
    <div class="container">

    </div>
<div>

<style type="text/css">
    .contact{
        height: 100%;
        width: 100%;
        background: #EEE;
    }

    .container {
    height: 200px;
    width: 350px;
    position: relative;
    border: 1px solid #e3e312;
    box-shadow: 3px 6px 26px #3A1314;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 15%;
    z-index: 999999;
}
</style>