在另外2个div上定位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>