title: HTML form overlay on a widget contained in a div
body: <p>I am a novice when it comes to modern HTML (HTML5/CSS/Ajax/JQuery, etc). I have a web application that is using a Google Earth plugin like tool called Cesium. Like Google Earth, it allows you to view and interact with a global map of the earth. Cesium runs as a widget in a div container. The canvas takes up a whole div element. In my app it takes the entire width and most of the body.</p>
  
  <p>I have a need for a small text search form that exists outside of this div container. </p>
  
  <p>It consists of one form input and a couple of buttons. I would like this to sit on top (overlay) the div container that contains the cesium widget. I would like it to only take up a small section in the upper left corner, overlaying the cesium widget. I would be great if the background, underneath the form input field and buttons were transparent.</p>
  
  <p>Below is a small sample of the HTML and CSS. I know it will involve some CSS but as I said I’m a novice. </p>
  
  <p>Any helpful hints on slick ways for doing this would be appreciated. </p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="../cesium/Build/Cesium/Widgets/widgets.css"&gt;
      &lt;script&gt;
      var cesiumViewer = null; //declare these here so processTextInputForm() has access to them
   &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
   &lt;!--I want this to semi transparently overlay the cesiumContainer div, and only take a minumum amount of width--&gt;
      &lt;div class="textSearchSection" id="textSearchSection"&gt;
          &lt;form id="searchForm" name="searcForm"&gt;
              &lt;input type="text" id="searchText" name="searchText" class="textInputField" onchange="somejavascriptfunction()"/&gt;
     &lt;input id="searchButton" type="button" value="Text Search" class="button" onclick="somejavascriptfunction()"&gt;
     &lt;input id="clearButton" type="button" value="Clear" class="button" onclick="somejavascriptfunction()"&gt;
          &lt;/form&gt;
   &lt;/div&gt;
   
   &lt;!--This is the div that contains the cesium application--&gt;
      &lt;div class="map" id="cesiumContainer"&gt;&lt;/div&gt;
  
   &lt;script&gt;
   cesiumViewer = new CesiumViewer(); //This can't be created until after the cesiumContainer id is declared in the div.
   &lt;/script&gt;
   
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>