Question

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

我需要一个存在于此div容器之外的小型文本搜索表单。

它由一个表单输入和几个按钮组成。我希望这个位于顶部（覆盖）包含cesium小部件的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>

Answer 1

我的方法是移动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;
}

Answer 2

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

.map
{
  height : 100%;
  overflow : hidden;
  width : 100%;
  z-index : 0;
}

.searchOverlay
{
  left : 10;
  position : relative;
  top : 33;
  width : 50%;
  z-index : 1;
}

    <div class="map" id="cesiumContainer">
      <div class="searchOverlay" id="searchContainer">
        <input class="textSearch" id="searchText" name="searchText" type="text" onchange="processTextInputForm()"/>
          &nbsp;
        <input class="button" id="searchButton" type="button" value="Search" onclick="processTextInputForm()" onkeydown="searchEnter(event)">
          &nbsp;
        <input class="button" id="searchButton" type="button" value="Clear" onclick="clearResults()">
      </div>
    </div>

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

2 个答案: