title: CSS - Issue with z-index of blinking curosr of input box in IE-11
body: <p>In IE-11 when the typed text string is longer in the input box, the blinking cursor of input box moves over the div having id "Second". </p>
  
  <p>Please suggest how I can stop this.</p>
  
  <p>Refer "<a href="http://jsfiddle.net/rhcpz4uq/" rel="nofollow">http://jsfiddle.net/rhcpz4uq/</a>" </p>
  
  <p>OR</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
    &lt;title&gt;Z-Index Problem&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="first" style="width: 500px; height: 500px;  display:inline; position:absolute;"&gt;
      &lt;input id="input1" type="text" value=""&gt;&lt;/input&gt;
    &lt;/div&gt;
    &lt;div id="second" style="width: 200px; height: 100px; left: 50px; background-color: pink; display:inline; position:absolute;"&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>