html - 将一个 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%);
}