title: Overlapping elements - Form in front, but cursor goes behind
body: <p>I have a form with an input field. While the input field comes in front, the text cursor seems to go behind. I have tried various Z-index combinations, which don't help, as the object is already in front. How do I get the cursor in front? I know I'm doing something trivially wrong, but I'm not able to place it</p>
  
  <p><strong>Code snippet:</strong></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>.searchBox {
    background-color: #7e7e7e;
    border: medium none;
    color: #fff;
    font-family: arial;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    height: 24px;
    padding-left: 10px;
    position: absolute;
    width: 38.7%;
    z-index: 3000;
  }
  
  .searchIconBox {
    background-color: #7e7e7e;
    height: 24px;
    margin-top: 0;
    padding-left: 5px;
    padding-top: 3px;
    width: 5%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:49%;"&gt;
    &lt;form style="width:94%;" class="pull-left"&gt;
      &lt;input type="text" class="searchBox" placeholder="Search"&gt;&lt;/input&gt;
    &lt;/form&gt;
    &lt;div class="pull-right searchIconBox"&gt;
      &lt;asset:image src="search.png" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>