Css 包含在div中的小部件上的HTML表单覆盖

谈到现代HTML（HTML5/CSS/Ajax/JQuery等），我是个新手。我有一个web应用程序，它使用一个名为Cesium的类似Google Earth插件的工具。像谷歌地球一样，它允许你查看全球地球地图并与之互动。铯作为div容器中的小部件运行。画布占据了整个div元素。在我的应用程序中，它占据了整个宽度和身体的大部分

我需要一个小的文本搜索表单，它存在于这个div容器之外

它由一个表单输入和两个按钮组成。我希望它位于包含铯小部件的div容器的顶部（覆盖）。我希望它只占据左上角的一小部分，覆盖铯小部件。如果表单输入字段和按钮下面的背景是透明的，那我就太好了

下面是HTML和CSS的一个小示例。我知道这将涉及一些CSS，但正如我所说，我是一个新手

如果您能提供任何有用的提示，帮助您顺利完成此任务，我们将不胜感激

谢谢

正文
{
背景色：#000000；
保证金：0；
边缘底部：20px；
边缘顶部：20px；
宽度：100%；
}
.textsearch部分
{
显示：内联块；
浮动：左；
身高：5%；
垫面：5px；
右边填充：0px；
垫底：5px；
左侧填充：5px；
宽度：500px；
}
.textInputField
{
宽度：200px；
}
.地图
{
身高：95%；
溢出：隐藏；
宽度：100%；
}
按钮
{
宽度：80px；
}

var cesiumViewer=null//在此处声明这些，以便processTextInputForm（）可以访问它们
cesiumViewer=新的cesiumViewer（）；//在div中声明cesiumContainer id之前，无法创建此项。

我的方法是移动

textsearch节

，使其作为

cesiumContainer

的同级元素嵌套在父容器中：

<div id="parentContainer">
    <div class="map" id="cesiumContainer"></div>
    <div class="textSearchSection" id="textSearchSection">...</div>
</div>

---

实际上，将表单div（下面的searchContainer）移动到cesiumContainer div中，并使用cssz-index属性，如下所示（searchOverlay设置为1，map设置为0），就可以做到这一点。所以它是cesiumContainer div的孩子

.map
{
身高：100%；
溢出：隐藏；
宽度：100%；
z指数：0；
}
.searchOverlay
{
左:10 ;；
位置：相对位置；
排名前33名；
宽度：50%；
z指数：1；
}

#textSearchSection {
position: absolute;
top: 0;
left: 0;
z-index: 12;
}