对于现代HTML（HTML5 / CSS / Ajax / JQuery等），我是新手。我有一个网络应用程序正在使用Google Earth插件（如名为Cesium的工具）。与Google Earth一样，它可以让您查看地球的全球地图并与之互动。 Cesium在div容器中作为小部件运行。画布占用整个div元素。在我的应用程序中，它占据了整个宽度和大部分身体。
我需要此div容器之外的小型文本搜索表单。
它由一个表单输入和几个按钮组成。我希望它位于包含铯小部件的div容器的顶部（覆盖）。我希望它只占左上角的一小部分，覆盖铯小部件。如果表单输入字段和按钮下面的背景是透明的，那就太好了。
以下是HTML和CSS的一个小示例。我知道它将涉及一些CSS，但是正如我所说的，我是新手。
任何有用的技巧都可以用来完成此操作。
谢谢！
body
{
background-color : #000000;
margin : 0;
margin-bottom : 20px;
margin-top : 20px;
width : 100%;
}
.textSearchSection
{
display:inline-block;
float:left;
height : 5%;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
width: 500px;
}
.textInputField
{
width : 200px;
}
.map
{
height : 95%;
overflow : hidden;
width : 100%;
}
.button
{
width : 80px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="../cesium/Build/Cesium/Widgets/widgets.css">
<script>
var cesiumViewer = null; //declare these here so processTextInputForm() has access to them
</script>
</head>
<body>
<!--I want this to semi transparently overlay the cesiumContainer div, and only take a minumum amount of width-->
<div class="textSearchSection" id="textSearchSection">
<form id="searchForm" name="searcForm">
<input type="text" id="searchText" name="searchText" class="textInputField" onchange="somejavascriptfunction()"/>
<input id="searchButton" type="button" value="Text Search" class="button" onclick="somejavascriptfunction()">
<input id="clearButton" type="button" value="Clear" class="button" onclick="somejavascriptfunction()">
</form>
</div>
<!--This is the div that contains the cesium application-->
<div class="map" id="cesiumContainer"></div>
<script>
cesiumViewer = new CesiumViewer(); //This can't be created until after the cesiumContainer id is declared in the div.
</script>
</body>
</html>最佳答案
我的方法是移动textSearchSection，使其嵌套在父容器中作为cesiumContainer的同级元素：
<div id="parentContainer">
<div class="map" id="cesiumContainer"></div>
<div class="textSearchSection" id="textSearchSection">...</div>
</div>
然后，可以设置
parentContainer的样式，使其与cesiumContainer的大小完全相同，并为textSearchSection设置以下样式：#textSearchSection {
position: absolute;
top: 0;
left: 0;
z-index: 12;
}