将div置于另一个下方

Question

我正在尝试实施div图层，如下图所示：

当用户点击“网站列表”按钮时，我希望div显示在表单上。到目前为止，我使用jQuery中的toggle函数隐藏并显示div（不确定它是否是最佳方式）。我需要帮助定位div，如图所示。我怎样才能做到这一点？
此外，当用户选择特定网站时，我希望它在下面的表单中加载该特定网站的信息。这是可能的，如果是的话，怎么样？

Answer 1

你必须使用position: absolute 请访问此链接CSS Layout - The position Property以了解有关职位的更多信息

Answer 2

据我所知，您的问题是如何像您提供的图像一样定位该表。

我更正了<select>，其中大部分都有id: exterior-location。在任何情况下，您都不应在同一页面上拥有多个共享相同值的id，id 必须是唯一的。

<form>包裹着一切。

DEMO

相关CSS

@charset "utf-8";

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45 Verdana;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}

body {
  background: #EDF;
  color: #221;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* modal */

#my-sites-select-layer {
  position: absolute;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: auto;
  top: 75px;
  left: 20px;
  z-index: 4444;
  background-color: hsla(0, 0%, 80%, 1);
  padding: 22px 40px 50px 0;
}

#site-select-table {
  padding-right: 20px;
}