Javascript 将div置于另一个div之下

我正在尝试实现一个

div

层，如图所示：

当用户单击站点列表按钮时，我希望

div

显示在表单上。到目前为止，我使用jQuery中的toggle函数来隐藏和显示

div

（不确定这是否是最好的方法）。我需要帮助定位

div

，如图所示。我如何才能做到这一点？

---

另外，当用户选择一个特定的站点时，我希望它在下面的表单中加载该特定站点的信息。这是否可能，如果可能，如何实现？

您需要在表本身上使用

位置：绝对值，并执行以下操作：

1） 要使表格垂直居中，必须定义高度。
2） 该表必须是
#站点级ext lighting form
的子表，因此需要稍微修改html。
3） 必须在父元素上指定
position:relative

#my-sites-select-layer{
  width:900px;
  height: 250px;
  background: white;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
}

我修改了您的。
您必须使用
位置：绝对
请访问此链接以了解有关位置的更多信息，因为我知道您的问题是如何像您提供的图像一样定位该表

我更正了
s，其中大多数都有相同的
id:external location
。在任何情况下，同一页上都不应该有多个
id
共享相同的值，
id
s必须是唯一的

包裹着一切


相关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;
}

请在代码段（）中发布代码，或者另外，您应该参考，这看起来类似于您可以使用JQuery UI对话框执行的操作。很抱歉，没有在前面发布这段代码。我试图显示的div位于底部。当用户选择一个站点时，我希望它隐藏div并填充表单中的字段。